The code from my example Codeply is using Bootstrap 4, but your code is using Bootstrap 5 beta. If you take a look at the new Bootstrap 5 spacing utility classes you'll see that...
l (left) has been replaced with s (start)r (right) has been replaced with e (end)
Why margin left (ml-*) is not working in Bootstrap 5?
ml-auto no longer exists, and the Bootstrap 5 equivalent would be ms-auto:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="d-flex flex-grow-1">
<span class="w-100 d-lg-none d-block">
<!-- hidden spacer to center brand on mobile --></span>
<a class="navbar-brand d-none d-lg-inline-block" href="#"> Navbar 6 </a>
<a class="navbar-brand-two mx-auto d-lg-none d-inline-block" href="#">
<img src="//placehold.it/40?text=LOGO" alt="logo">
</a>
<div class="w-100 text-right">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar">
<ul class="navbar-nav ms-auto flex-nowrap">
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item nav-active">Our Solution</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">How We Help</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">Blog</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">Contact</a>
</li>
</ul>
</div>
</nav>
Demo: https://codeply.com/p/zzFC5XoyUm
Why margin right (mr-*) is not working in Bootstrap 5?
Additionally, mr-auto has been replaced with me-auto.
Here you can read why Bootstrap 5 uses the start and end approach to improve RTL support since left and right are absolute, while start and end are relative.
The flexbox utils such as justify-content-end can also be used as explained here
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
