CodePen

HTML

            
              <div class="header">
  blah blah header
</div>

<div class="wrapper">
  <h1>title</h1>
  <h2>etc etc</h2>
  <div class="normal">
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus turpis augue, malesuada eget pharetra malesuada, cursus id arcu. Etiam venenatis facilisis risus vitae ornare. Pellentesque ut dolor orci, vitae tempor tellus.</p>
  </div>
</div>
<div class="outside">
  <div class="wrapper">
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus turpis augue, malesuada eget pharetra malesuada, cursus id arcu. Etiam venenatis facilisis risus vitae ornare. Pellentesque ut dolor orci, vitae tempor tellus.</p>
  </div>
</div>
<div class="wrapper">
  <div class="normal">
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus turpis augue, malesuada eget pharetra malesuada, cursus id arcu. Etiam venenatis facilisis risus vitae ornare. Pellentesque ut dolor orci, vitae tempor tellus.</p>
  </div>
  <div class="normal">
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus turpis augue, malesuada eget pharetra malesuada, cursus id arcu. Etiam venenatis facilisis risus vitae ornare. Pellentesque ut dolor orci, vitae tempor tellus.</p>
  </div>
</div>
    
<div class="footer">
  blah blah footer
</div>
            
          
!

CSS

            
              .header{
    width: 100%;
    background-color:black;
    color:#fff;
}

.wrapper{
    background-color:grey;
    margin: 0 auto;
    width: 320px;
}

.wrapper .normal{
    background-color:red;
}

.outside{
    background-color:blue;
}

.footer{
    width: 100%;
    background-color:black;
    color:#fff;
}
​
            
          
!

JS

            
              
            
          
!
999px
Loading ..................