Отзывчивый навигатор не будет центрировать

Question

Я делаю отзывчивый веб-сайт 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