Как добавить отступ в navbar, когда экран маленький?

Дефолтный бутстрап, тема album.

Есть список в шапке:

<ul class="navbar-nav ml-auto">
        <li class="nav-item dropdown">
            <a class="nav-link" href="">
                <i class="fas fa-gift"></i>
            </a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
                Меню <span class="caret"></span>
            </a>
        </li>
    </ul>

2 элемента. Чтобы элементы были выстроены в одну строку, я переопределил стиль:

.navbar-nav {
    flex-direction: row;
}

Теперь проблема. Когда экран широкий, то визуально между элементами есть отступы.
Сужаем окно браузера и расстояние пропадает.

Как сделать так, чтобы появилось расстояние между элементами (отступ справа от иконки), когда маленький экран? Например - на мобилках. Спасибо!