nav-item bootstrap 5 in a row

I want to make a fixed navbar on top with one row, not just two. the code I have is:

<div class="col-md-3">
    <ul class="navbar-nav mb-2 mb-lg-0">
        <li class="nav-item">
            <a class="nav-link text-white" href="login.html">Login</a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-white" href="teaching.html">Teaching</a>
        </li>
    </ul>
</div>

Now I want to make one row. Is there any clean way to do this??

Add list-group-horizontal class to ul tag.

<div class="col-md-3">
    <ul class="navbar-nav mb-2 mb-lg-0 list-group-horizontal">
        <li class="nav-item">
            <a class="nav-link text-white" href="login.html">Login</a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-white" href="teaching.html">Teaching</a>
        </li>
    </ul>
</div>

You may see the list should have some spaces between them.

https://getbootstrap.com/docs/5.0/components/list-group/#horizontal