Bootstrap background width padding - css

Question

I'm using Boostrap 3 and have a problem with backgrounds on elements that appear too wide. The container is in desktop mode 1170px and has 15px padding left and right which makes the content appear with 1140px width.
When I'm adding an element with a different background color (let's say body + .container both has same background), then the element will appear as 1170px wide due to the background showing in the padding area as well.
I could add CSS for each element with deviating background in each screen width (media queries) to solve the problem. But I hope there is a better way to achieve this since I can't be the only person with this problem. Does anyone know some Boostrap class / function to solve this issue, or know some best practise for this?

Answer 1

Try wrapping the rows and/or inner content, you can see how I have done it here; http://jsfiddle.net/w7wowg94/
HTML
<div id="master-wrap">
<div class="container">
<div class="wrap-class-one">
<div class="row">
<div class="col-md-6">Content 1</div>
<div class="col-md-6">Contnent 2</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-4">
<div class="inner-wrap">Content 1</div>
</div>
<div class="col-md-4">
<div class="inner-wrap">Contnent 2</div>
</div>
<div class="col-md-4">
<div class="inner-wrap">Contnent 2</div>
</div>
</div>
</div>
</div>
CSS
#master-wrap {
margin: 0 auto;
background-color: #eee;
padding: 15px;
}
.wrap-class-one {
background-color: #ccc;
padding: 15px;
}
.inner-wrap {
padding: 15px;
background-color: #ccc;
}