Добавляем обертку для меню
<div class="menu__wrapper">
<div class="menu">
...
</div>
</div><!--/.menu__wrapper (отмечаем конец обертки, дабы не путать с другими закрывающими тегами) -->
Обертку раcтягиваем, а содержимое меню центрируем внутри относительно нее:
.menu__wrapper {
width: 100%;
margin: 0 auto;
}
.menu {
width: auto;
margin: 0;
text-align: center;
}
Вот что получилось
codepen
Таким образом меню центрируется при любой ширине экрана, и при изменении ширины из-за добавления пунктов меню, будет оставаться центрированной. Если по какой-то причине такое центрирование мешает. Можно подобрать ширину
div.menu, при которой
margin: 0 auto; будет продолжать выравнивать блок по центру. Но тогда возникнет проблема с расширением меню при добавлении пунктов.
