Question

I’m having this problem with bootstrap where I’m trying to set a background colour on 2 .span6 divs, but the background is leaking into the margin on the left.

Any way of preventing this from occurring ? The following is the HTML used.

<div class="row">
        <div class="featured-post">
            <div class="span6">
                <!-- thumbnail image here -->
            </div>
            <div class="span6">
                <!-- text here -->
                </div>
            </div>
 </div>

And here is the css for the .featured-post div.

.featured-post {
  margin-bottom: 15px;
  background-color: rgba(0, 0, 0, 0.5);
  min-height: 320px;
}

Answer 1

Use firebug/chrome developers tools and you’ll see.

@media (min-width: 1200px)
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 30px;
}

That left margin is creating the extra space.

You can avoid those margins by placing the div like this:

<div class="featured-post">
   <div class="row">
      <div class="span6">
         <!-- thumbnail image here -->
      </div>
      <div class="span6">
         <!-- text here -->
      </div>
   </div>
</div>

This gives the .featured-post the width of the .container.