Header won't stretch to 100% when viewport resized, but footer will?

I'm working on a small site, and I've searched for an answer to no avail.

Both my header and footer are set to width:100%, along wit开发者_StackOverflow社区h the wrapper divs around them, and the body.

My header is not stretching to 100%, and it's even worse when I have to scroll horizontally, but my footer is filling the width properly. They're styled almost identically - I can't figure it out.

Here is the test site:

http://www.maxsitedesign.com/joncollins

Any help would be appreciated. At this point I've probably added extraneous styles in an attempt to fix it.

Removing the following rule fixes it.

.inside {
  padding: 10px;
}

style.css line 60

Basically what's happening is you are trying to apply a rule that should apply to the main content text only to the 100% width containers. 100% only applies to the actual width of the element and not the ultimate width. Thus your containers were 100% + 20px (10px for each side).

EDIT:

Took another look at the site and it appears the problem is now with #spray and #bottom-wrapper. You should remove the width:1300px from #spray and the min-width:1300px from #bottom-wrapper. Those pixel sizes are conflicting with your % sizes.