Page background and body background not displaying as I thought they would

I am working on this site: http://www.problemio.com and I am trying to get the entire background and the body background set.

I am trying to get the areas on 开发者_如何学Gothe very left and right sides to be the blue color, and the background of the body to be the gray color.

Instead, what is happening is for some reason, everything is blue except the header is all gray lol.

My css file is here http://www.problemio.com/main.css

How can I get the colors working as I intended? Also, I don't mind keeping the top area with the gray background as I think now it looks relatively ok.

@genadinik;

first problem is that your container div didn't take entire height of the child divs so how have to it clear . Second: right now it's takes entire width of the screen so you have to define width to it

 .container{
  overflow:hidden;
  width:1000px;
  margin: 0 auto;
}

The default color on your page is blue:

body {
    background-color : #4dbefa;
}

It looks like you have a div with the id bd that contains your main content. Since you haven't specified the background color for this div, it's effectively transparent and you'll see whatever background that's behind it. You'll need to override the background color on this div if you want the color to be different.

div#bd {
        background-color: #ccc; /* some form of gray */
}