Question

I feel like I am not writing this correctly and this is my first layout in this nature.
I have a site that has several backgrounds that go across the whole screen. The inner containers are 960 pixels and then centered.

The only problem is every section with a different background needs its own outer and inner div.

Dabblet
http://dabblet.com/gist/2920465

Foo

 <section class="hero">
   <div class="hero-container">
   Hero content  
   </div>
 </section>


 <section class="popular">
   <div class="popular-container">
   Header content  
   </div>
 </section>

 <div class="main">
   <div class="main-container">
     Main content
   </div>
 </div>

 <footer>
   <div class="footer-container">
     Footer content
   </div>
 </footer>

Answer 1

So far the code looks ok. It’s too simple to go wrong. Only thing for now i would change is the 5 classes

.header-container,
.hero-container,
.popular-container,
.main-container,
.footer-container

merge into one class inner-section-container and apply this class to the corresponding elemnts instead, as for now you do for all this classes the same thing.