Working with Bootstrap-5, I've been experimenting with the new way to create a navigation bar and almost have it how I want. However, I'm struggling to align the last element to the right. Any suggestions?
Here is what my current setup looks like: https://jsfiddle.net/FoTL_Development/428wyt6q/72/
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<span class="navbar-toggler">Brand Name</span> <!-- Get the hide/apper effect but without the style -->
<!-- Left Element -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Left</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Left</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Left</a>
</li>
</ul>
</div>
<!-- End Left Element -->
<!-- Center Element -->
<div class="collapse navbar-collapse">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 m-auto">
<li>Center</li>
</ul>
</div>
<!-- End Center Element -->
<!-- Right Element -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li>Right</li>
</ul>
</div>
<!-- End Right Element -->
</div>
</nav>