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

Question

视口达到最大宽度后，在将浏览器右侧的div正确对齐时出现问题。

该Codepen显示了该问题。

问题div是.rghtlogo，当浏览器视口小于1200px（主体最大宽度）时，它的正确位置为right：4％

但是，当浏览器的视口变得大于1200px时，它会将页边距推至主体容器而不是浏览器右内边缘的4％。

我尝试将其包装在没有运气的绝对位置div中，尝试浮动.rghtlogo避免运气，并且基本上已经采取了一种非常草率的不良解决方法，即使用多种媒体查询来基本上随着浏览器的变大而改变边距。 但是，此动作并不流畅。

@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}}

我没有搜索如何解决此问题。 任何帮助是极大的赞赏。

Answer 1

更改position:fixed为.rghthdr position:relative
并将.rghtlogo top和right分别.rghtlogo为-250px和0 。

因此， .rghtlogo始终相对于.rghthdr定位。
请参阅此更新的Codepen： http ://codepen.io/yogeshkhatri/pen/NPKQZg

Answer 2

将.rghthdr中的position：fixed固定为position：relative，并将.rghtlogo中的top和right分别更改为-250px和0。 这样.rghtlogo总是相对于.rghthdr定位

这实际上杀死了javascript函数。 谢谢你！ 我最终弄清楚了。

它真的很愚蠢，我意识到我的.nav div是所有标头的容器，其宽度设置为100％，但边距设置为2.5％。 一旦将其更改为width：95％，所有内容均已修复。