Why doesn't this footer expand completely to the sides?

I am designing a template for my school's website and require some help. All was going great until I got to the footer. I have noticed that everything but the top navigation is unable to expand completely to the sides of the screen. This is really frustrating as I am trying to fill the footer to the same width as the navigation.

For your convenience, I have uploaded a copy of the template here. I believe that it is related to the css b开发者_C百科ut I have tried every possible value I can think of to no effect.

Please help if you can.

Thank you for your time.

because you have an 8px margin on the body element. In your css, try this

body, html
{
    margin: 0;
    padding: 0;
}

That's a good snippet to include in every project btw.

Add Margin:0px to the body{ tag in the CSS

This will fix it:

body{
    background: #fbe2a9 url(images/body-bg.jpg) repeat-x  top;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    margin: 0px;
}

Browsers, by default, give the body tag a margin. So, all you need to do is set that to 0:

body { margin: 0; }

The reason why the top navigation appears how you want it to, is because you're setting the position to fixed and "gluing" it to the top left of the screen (0, 0) with a width of 100%.

Add margin: 0 to the body tag

Well to start, you are doing clear:both and float:left, when you only need clear:both. Then add the following to #footer_wrapper:

#footer_wrapper {
    position:relative;
    left:-7px;
}