Featured Content Width

Hi I'm having a problem with my featured content. I need each cell to be more wide so they fill the page. There is currently a gap on the right side of my featured content section that I'm trying to get rid of. This gap was created when I made the page full width. The URL is americanpowerins dot com and my current css codes are here:

.sidebar-header-right { display: none; }

.site {
    width: 100%;
}
#feature-slider .cycle-slideshow {
    max-width: unset;
    width: 100%;
}
#feature-slider img{
	width: 100%;
}
#featured-content.layout-four .hentry {
    width: 25%;
}
.catchresponsive-nav-menu {
    display: table;
    width: 100%;
}
.catchresponsive-nav-menu > li {
    display: table-cell;
  float: none;
}
.catchresponsive-nav-menu > li > a {
    display: block;
    text-align: center;
}
#search-toggle {
  	display: none;
}

 #main{
	width: 1100px;
}
#supplementary.four .widget-area {
    width: 25%;
.sidebar-primary {
    float: left;
    width: 88%;
}
}

@media screen and (min-width: 768px) {
     #main{
     width: 1100px;
	}}