Выравнивание навигации по центру Bootstrap

Всем привет. Решил ознакомиться с бутрапом и начал делать небольшой сайт. Наткнулся вроде на мелочь, но неприятно. Вообщем код навигационной панели:

<div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto text-center">
                <li class="nav-item active">
                  <a class="nav-link" href="#">1</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">2</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">3</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">4</a>
                </li>
            </ul>
</div>

ml-auto для широких экранов выровнял навигацию по правому краю. В бургер меню при маленьких экранах она оказалась почему то слева. Добавил text-center и вроде выглядит неплохо. Но теперь решил добавить отступы между пунктами меню при большом экране.Кроме margin/padding не придумал как это можно сделать. Добавил, вроде не плохо, но теперь смотрю на бургер меню и по очевидным причинам там отступ слева тоже добавился и текст уже не в центре.Как можно по отдельности стилизовать навигацию для больших и маленьких экранов. Сори за воду, не знал как короче сформулировать. Возможно и так понятно, но на всякий приложу фото.