Stop wrapper from moving – CSS only issue

I need help ..
I am wanting to stop the main wrapper and footer moves when the browser is resized.

Am wanting it to stay lined up with the yellow in the header.

The website is HERE

Am ripping out hair now .. aaaarrrr!!!

Here is the main parts of the styles.css

#wrapper {
overflow: hidden;
position: relative;
float: center;
height: auto;
margin:auto;
width: 900px;
background: rgb(241,238,0);

}
#main, #content {
float: left;
margin: auto;
height: auto;
min-height: 400px;
width: 650px;
}