響應式導航欄不會中心

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