Div Row and Columns Background Color
Im Having Problem with My Row's Background I Can't Maximize the Content to the Left So I Have This Little Space with Different Color. Screenshot - I Need to...
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 class="row" style="box-shadow: 0 3px 0px 0px #888888, 7px 0 7px -4px #888888, -7px 0 7px -4px #888888;">
<?php get_header(); ?>
<div id="content">
<div class="twelve columns clearfix">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class('clearfix'); ?> role="article" itemscope itemtype="">
<section class="nine columns clearfix" itemprop="articleBody" style="border-right: 1px solid #a79c7f; min-height:450px; background:transparent;">
<!-- article header -->
<header>
<!--h1 class="page-title" 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 class="tags"><span class="tags-title">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.