why is fixed position messing up my alignment?

css, css-position, html

Solution

Just use `position: fixed` on the container div, don't use it twice

Demo

.structure {
    width:960px;
    padding:20px;
    margin:0px auto 0px auto;
    background:#121212;
    border-left:5px #F06BA8 solid;
    border-right:5px #F06BA8 solid;
}
.header_home_structure {
    width:960px;
    margin:0px auto 0px auto;
    height:80px;
}
.header_home_bg {
    width:100%;
    background:#121212;
    border-bottom:3px #F06BA8 solid;
    height:80px;
    position:fixed;
}

Problem

I am trying to keep the header still and have the rest of the content scroll underneath it. I am able to achieve this, however when I put a fixed position on my two header divs the break out of the margin auto. css: ``` .structure { width:960px; padding:20px; margin:0px auto 0px auto; background:#121212; border-left:5px #F06BA8 solid; border-right:5px #F06BA8 solid; } .header_home_structure { width:960px; margin:0px auto 0px auto; position:fixed; height:80px; } .header_home_bg { width:100%; background:#121212; border-bottom:3px #F06BA8 solid; height:80px; position:fixed; } ``` html: ``` <body> <div class="header_home_bg clearfix"> <div class="header_home_structure clearfix"> </div> </div> <div class="structure clearfix"> </div> </body> ```

Original source