I have got myself into a little of predicament where I've got a fixed width site, but need two fluid width bars to visit 100% in all directions. I am utilizing a rather horrible wordpress template for that site under consideration, that any time you save any configurations it saves this content width according to its configurations. Within this situation it's 900px.

Factor is I am pleased with the entire site being 900px, it is simply a header bar and footer bar which i need 100%, the elements inside these bars could be 900px, I simply require the colour to increase to every side from the screen.

The website under consideration is http://mysterybox.co/ You can observe in the image below which bar I want extended out. If anybody could point me within the right direction that might be great.

Mysteryboxsite

Just produce a new container for your header and footer and remove them of the #container div. Something similar to this works:

HTML

<div class="header-wrapper">
  <div id="headerwidth">
   ....
  </div>
</div>

<div class="footer-wrapper">
  <div id="footer">
   ....
  </div>
</div>

CSS

.header-wrapper, .footer-wrapper {
 background-color:#000;
 margin:30px 0 40px;
}

#headerwidth, #footer {
 width:900px;
 margin:0 auto;
}