Here is a picture of my current situation. I am struggling with placing items using bootstrap flexibly, specifically trying to center all the buttons using justify-content: center. However, it seems that the default setting in navbar-expand-sm is justify-content: flex-start. What should I do next? Thank you ![Text](https://stacenter image description here
<nav class="navbar bg-danger navbar-dark position-relative">
<div class="navbar-expand-sm">
<div class="container-xxl">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navmenu"
>
<span class="navbar-toggler-icon"> </span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<!-- How to put the buttons in the middle? -->
<ul class="navbar-nav">
<li class="nav-item ml-3">
<a href="#StudyPlan" class="nav-link" style="border-radius: 1rem white;">Login</a>
</li>
<li class="nav-item">
<a href="#Instructors" class="nav-link">Other Service</a>
</li>
<li class="nav-item">
<a href="My Blog.html" class="nav-link">My Blog</a>
</li>
<li class="nav-item">
<a href="#CommonQuestions" class="nav-link">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>