响应导航栏不会居中

Question

我正在使用bootstrap创建一个响应式html网站，我似乎无法将我网站的导航栏置于某个观察点的中心位置。 （我把它放在pastbin中，因为它是很多代码，对不起。）

HTML

CSS

网站（调整窗口大小以查看我的意思。）：shanebacon.com

Answer 1

您的问题是因为您在导航栏上使用position: fixed会将元素从文档流中分离出来。所以margin: auto不会产生影响。但是你确实有1000px的固定宽度，所以你可以使用它：

.masthead.nav{
   left: 50%;
   margin-left: -500px;
}

这样做会将导航栏移到左侧50%，但它不是距离中心50％，而是从左角开始。所以你需要使用负边距（宽度的一半）将导航带回中间。

还要注意：看来这些类都是循环的：

.masthead, .mastfoot, .masthead .inner {
   width: 1000px;
   position: sticky;
   margin: 0 auto;
}

不要将它添加到这三个中，它会抛弃你的CSS。请务必仅将其添加到.masthead或.masthead.nav

EXAMPLE