How to add padding to navbar when screen is small?

Question

Bootstrap

Default bootstrap, album theme.
There is a list in the header:

<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 elements. To ensure that the elements are lined up on the same line, I override the style:

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

Now the problem. When the screen is wide, visually there are indents between the elements.
We narrow the browser window and the distance disappears .
How to make it so that there is a spacing between elements (padding to the right of the icon) when the screen is small? For example - on mobile phones. Thank you!