最大宽度正在更改位置：固定边距

Question

I am having a problem properly aligning a div on the right side of the browser after the viewport has reached max-width.

This Codepen shows the issue.

The problem div is .rghtlogo, which while the browser viewport is less than 1200px (the body max-width) is properly positioned with a right:4%

However, when the browser viewport gets bigger than 1200px it pushes the margin in 4% of the inner right edge of the body container rather than the browser.

I tried wrapping it in an absolute positioned div with no luck, tried floating the .rghtlogo no luck and basically have resorted to a really sloppy undesired workaround using multiple media queries to basically change the margin as the browser gets bigger. However this action is not fluid.

@media (min-width:1201px){.rghtlogo{margin-right:3% !important}}
@media (min-width:1216px){.rghtlogo{margin-right:1.5% !important}}
@media (min-width:1230px){.rghtlogo{margin-right:.75% !important}}
@media (min-width:1251px){.rghtlogo{margin-right:0% !important}}
@media (min-width:1256px){.rghtlogo{margin-right:-1% !important}}

I have searched with no avail as to how to fix this. Any help is greatly appreciated.

Answer 1

Change position:fixed to position:relative in .rghthdr
and change top and right in .rghtlogo to -250px and 0 respectively.

So that .rghtlogo is always positioned relative to .rghthdr .
See this updated codepen : http://codepen.io/yogeshkhatri/pen/NPKQZg

Answer 2

Change position:fixed to position:relative in .rghthdr and change top and right in .rghtlogo to -250px and 0 respectively. So that .rghtlogo is always positioned relative to .rghthdr

That actually kills the javascript function. Thank you tho! I did end up figuring it out.

Its really stupid, I realized my .nav div which is the container for all the header was set to 100% width but set with a 2.5% margin. Once I changed it to width:95% everything was fixed.