Why bootstrap navbar component is pushed into the middle? - html

Question

I have copied the navbar code from the Bootstrap 4.6 navbar documentation, and I just added an icon at the beginning of the navbar.
The problem is that whenever I decrease the size of the window and the collapse starts applying the anchor "smile" gets pushed into the middle, I want it to stay in its place after the collapse applies.
What caused this problem and how can I fix it?
My code:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<i class="far fa-laugh-beam text-white mt-1"></i>
<a class="navbar-brand ml-2" href="#">Smile</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>

Answer 1

Without css code i can just guess. But i think it looks like justify-content:space-between;
Try to gave one of your classes in <nav> just justify-content:flex-start; or check it inline with <nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="justify-content:flex-start;">