div row and columns background color

Im having problem with my row's background i cant maximize the content to the left so i have this little space with different color.

screenshot -

I need to change that small remaining space with the same color as the content.

CSS

.row .twelve { background: #f2eee3; } 

HTML

<div> <?php get_header(); ?> <div> <div> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <article <?php post_class('clearfix'); ?> itemscope itemtype=""> <section itemprop="articleBody"> <!-- article header --> <header> <!--h1 itemprop="headline"><?php the_title(); ?></h1--> </header> <!-- end article header --> <?php the_content(); ?> </section> <!-- end article section --> <?php get_sidebar(); // sidebar 1 ?> <footer> <?php the_tags('<p><span>Tags:</span> ', ', ', '</p>'); ?> </footer> <!-- end article footer --> </article> <!-- end article --> <?php endwhile; ?> <?php else : ?> <?php endif; ?> </div> </div> <!-- end #main --> <?php get_footer(); ?> </div> <!-- end #content--> 

i changed the html to this and apply some inline styles but my problem now is that the border from the content doesnt align to the header and footer cuts.

LINK FOR THE WEB-

2 Answers

CSS

.row .twelve { background: #f2eee3; padding: 0px; /* added this */ } .row .nine { background: #e8e6d2; /* added this */ } 

resizing the image of the slider to align it to the dividers below

Increase the width and decrease margin-left value of div. By doing this the gap will be replaced by the div itself.