keep content centered while stretching backgrounds

Question

I want my website to have this horizontally split background look while keeping the content in a container of 980px, like this site http://votezachandleah.com/

I have done this by setting a height and background color to the divs but when i put them in the container it cuts the background color down to 980px...

#container {
    margin: 0 auto;
    width: 980px;
}

#another_section {
    background-color: #66cc33;
    height: 650px;
    width: 100%;
}

#background {
    background-color: #FFFFFF;
    color: #333333
    height:600px;
    text-align: center;
    width: 100%;
}

HTML:

<div id="container">
     <div id="background">
     </div>
    <div id="another_section">
     </div>
</div>

Answer 1

You should give the body the same colors as the container.