Центрирование навигационной панели при изменении размеров экрана

Question

Я пытаюсь центрировать свою панель навигации, после того как размер моего экрана уменьшился. Я убедился, что мой класс, содержащий мою навигацию: .menu имеет следующее

display: 
inline-block; 
margin: 0px auto;

Это все еще не в центре...

Тем не менее, мой логотип, содержащийся в div выше, имеет те же свойства, и он может центрироваться при изменении размера экрана.

Мое меню HTML

<nav class="navbar">
<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".sidebar-nav">
        <span class="fa fa-bars"> </span>
    </button>
    <a href="javascript:void(0)" class="navbar-brand logo-top"> </a>
</div>
<div class="sidebar-offcanvas sidebar-nav" role="navigation">
    <ul class="menu">
        <li class="active"><a href=“#A" data-section=“A”>A</a></li>
        <li><a href=“#B" data-section=“B”>B</a></li>
        <li><a href=“#C" data-section=“C”>C</a></li>
        <li><a href=“#D" data-section=“D”>D</a></li>
        <li><a href=“#E" data-section=“E”>E</a></li>
    </ul>
</div>
</nav>

Кто-нибудь может дать мне некоторое представление?

Answer 1

display: inline-block; потребности text-align: center; на родительском элементе для его центрирования, как вы думаете, потому что это встроенный элемент.

Вместо этого используйте display: block; margin: 0px auto;, Вам также нужно будет установить ширину, если она не полностью.

Примеры