导航栏正在推开它的另一部分

Question

我试图有一个导航栏，但我发现它不适合容器而且.header正在将.header .menu推到容器的另一侧，或者它是超出容器的确切。例如，如果容器是1280px，它将超过它。 通过更改.header的宽度，它可以以合适的方式设置，但是当浏览器调整为较小的版本显示它不适合它所在的当前容器时，它会响应不佳。

.header {
  background-color: #a5ffd6;
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  position: fixed;
  width: 100%;
  z-index: 3;
}

Jsfiddle没有显示出以完美形式显示它的问题但是当使用我自己的笔记本电脑进行测试时，它会显示我所说的错误。 https://jsfiddle.net/uL31od2g/

Answer 1

尝试用以下内容替换现有的！

#wrapper {
  margin: 0 auto;
  width: 80%;
}

.header {
  background-color: #a5ffd6;
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);
  position: fixed;
  width: 80%;
  z-index: 3;
}