Having trouble positioning a button in the nav container to the right side of the screen while keeping all other nav items centered using justify content center.
I've tried the following solutions:
- Using margin-left:auto on the button, but it shifts other links to the left side.
- Removing justify-content-center on the nav and adding flex-shrink:1 with margin-left: auto on the button.
- Moving the button outside the nav flex group, but then it appears on the next row.
See below for a screenshot of the nav container and button that needs to be positioned on the right side:
HTML:
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Places</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Careers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<button type="button" class="btn btn-primary">Primary</button>
</ul>