Column and column background color

I have a problem with my background row of rows, I cannot increase the content to the left, so I have this small space with different color.

screenshot - http://i.imgur.com/gOtYJhQ.png

I need to change this little 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="http://schema.org/BlogPosting">

                        <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 applied some inline styles, but now my problem is that the border from the content is not aligned with the header and footer cuts.

http://i.imgur.com/4xfaQJr.png

LINK FOR WEB -

http://fabioide.com/frederiksminde/vaerelser/

+3


source to share


2 answers


CSS

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

.row .nine {
background: #e8e6d2; /* added this */
}

      



resizing the slider to align it with the dividers below

+1


source


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



0


source







All Articles