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:

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

```<p><a href="127.0.0.1/uploads/monthly_12_2013/post-14301-0-40173900-1387460086.png">layout-good.png</a></p><p><a href="127.0.0.1/uploads/monthly_12_2013/post-14301-0-79515400-1387460095.png">layout-bad.png</a></p>

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…