当浏览器增加/减少时，布局背景和前景不会以相同的速率进行调整

Question

我有这个测试页面，我正在使用：

128.48.204.195:3000

我遇到的问题是顶部的黄色条。 如果使浏览器足够窄，则黄色条将停止与屏幕其余部分一起调整，并且蓝色按钮开始从页面和黄色条中伸出。

如何使黄色条和按钮以相同的速率调整而不会突出内容？

Answer 1

将.nav宽度更改为 100%。然后它将始终填充其内容。你有一个静态大小集，所以一旦包含元素变小，它就会保持其大小，从而突出。

.nav_bar .nav {
    width: 100%;
    height: 40px;
    margin: 0 auto;
    position: relative;
    z-index: 20;
}

或者像下面指出的 Thirtydot 一样，您可以完全删除宽度。