How to make horizontal strips across full screen without this "hack" - html

Question

I'm building a theme for a site and the behavior I want is for the main content to be contained in a horizontally centered div with a max-width, except for occasional rows that have colored backgrounds extending the entire width of the screen (this is the type of look that a lot of modern sites have). I'm also using bootstrap and I don't know if there are classes built-in for me to do this type of thing. But what I've been doing is like
<div class="container">
<div class="row">
<p>Here's a row that stays contained in the container</p>
</div>
<div class="row expand-full-width">
<div class="container">
<p>Here's a row that is contained in the center but has a background extended all the way across the screen horizontally</p>
</div>
</div/>
<div class="row">
<p>Here's a row that stays contained in the container</p>
</div>
<div class="row expand-full-width">
<div class="container">
<p>Here's a row that is contained in the center but has a background extended all the way across the screen horizontally</p>
</div>
</div>
</div>
.container { width: 200px; margin: 0 auto; }
.row { padding: 15px 5px; }
.expand-full-width { margin-left: -1000000px; margin-right: -1000000px; background: yellow; }
(fiddle: http://jsfiddle.net/pjpuLcat/)
but I'm wondering if there's a better way to do it because the margin-left: -somebignumber; margin-right: -somebignumber; "hack" is messing up the structure of some 3rd-party items I'm trying to incorporate in my site, including a JavaScript carousel. So is there a better way of doing this?

Answer 1

You're definitely right to think that having huge negative margins is not a great idea. Instead of having one .container that wraps everything, you should have .containers within each section.
<div class="row">
<div class="container">
<p>Here's a row that stays contained in the container</p>
</div>
</div>
<div class="row expand-full-width">
<div class="container">
<p>Here's a row that is contained in the center but has a background extended all the way across the screen horizontally</p>
</div>
</div>
<div class="row">
<div class="container">
<p>Here's a row that stays contained in the container</p>
</div>
</div>
<div class="row expand-full-width">
<div class="container">
<p>Here's a row that is contained in the center but has a background extended all the way across the screen horizontally</p>
</div>
</div>
.container { width: 200px; margin: 0 auto; }
.row { padding: 15px 5px; }
.expand-full-width { background: yellow; }
Updated fiddle