Need help aligning two blocks on each other

I am working on a site running CS-Cart v4.03. I have a header and content. The header is fixed using CSS to that when I scroll down, the header stays on the page.



When at full resoltion, everything lines up and looks good (Picture 1). When I shrink the browser the content seems fine, but whatever I try, the header wont stay lined up(Picture 2).



CSS I am using:


.tygh-header {
position: fixed;
z-index: 500;
margin-left: 380px;
}
.tygh-content {
padding-top: 119px;
margin-left: auto;
margin-right: auto;
}
.cart-panel {
background: url("../../../../../../../../design/themes/mobishop_blue/media/images/cart_panel_bg.gif") repeat-x scroll 0 0 #0505a0;
}

layout-good.png

layout-bad.png

I am not css pro, but I think

.tygh-header {

position: fixed;

z-index: 500;

margin-left: 380px;

}



must be

position: absolute; → and with: top/left/right/bottom: xxxpx; you can position the menu! Like:

top: 200px;

left: 0;

etc…