First you need to get rid of width: 9999px; from the selector below. Persoanlly I don't know what :before and :after is or does, never seen it before.

h2:before, h2:after {

content: "";

position: absolute;

background: #72AC24;

top: 0;

bottom: 0;

width: 9999px;

}

As the construction currently stands you'll never get the 'header' or 'navigation' <divs> to bleed to the edge of the browser window because they are contained within the 'container' <div> which you have set at a specific width - 980px. You need to move the 'header' and 'navigation' out of the 'container' <div>

The 'footer' is outside of the container <div> but you have set its width to 980px. Therefore it stops when it reaches that width. You need to put the 'footer' <div> inside a 'footerWrapper' <div> and then set the 'footer' css to have auto left/right margins - margin: 0 auto;