javascript - Max-width is changing position:fixed margin -

javascript - Max-width is changing position:fixed margin -

i having problem aligning div on right side of browser after viewport has reached max-width.

this codepen shows issue.

the problem div .rghtlogo, while browser viewport less 1200px (the body max-width) positioned right:4%

however, when browser viewport gets bigger 1200px pushes margin in 4% of inner right border of body container rather browser.

i tried wrapping in absolute positioned div no luck, tried floating .rghtlogo no luck , have resorted sloppy undesired workaround using multiple media queries alter margin browser gets bigger. action 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 no avail how prepare this. help appreciated.

change position:fixed position:relative in .rghthdr , alter top , right in .rghtlogo -250px , 0 respectively.

so .rghtlogo positioned relative .rghthdr. see updated codepen : http://codepen.io/yogeshkhatri/pen/npkqzg

javascript css css3