Bootstrap 5 & Rails: header menu with left center right content, weird behaviour - ruby-on-rails

Question

I'm working on a simple header for my Bootstrap 5 project.
Idea is to have Logo at the left, menu in the center and login/logout at the right.
This is the code:
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand ms-auto" href="http://www.foodissey.it">Foodissey</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="navbar-nav mx-auto">
<%= link_to "Home", static_pages_home_path, class: "nav-link " %>
<%= link_to "Il Progetto", static_pages_project_path, class: "nav-link " %>
<%= link_to "Chi Siamo", static_pages_team_path, class: "nav-link " %>
<%= link_to "Blog", static_pages_blog_path, class: "nav-link " %>
<%= link_to "Shop", static_pages_shop_path, class: "nav-link " %>
<%= link_to "Regalistica Aziendale", static_pages_b2b_path, class: "nav-link " %>
</div>
<div class="navbar-nav me-auto">
<%= link_to "Login", '#', class: "nav-link " %>
</div>
</div>
</div>
</nav>
The result is that the "Login" is not at the end-right of the navbar, but it is somewhere in the middle-right, and I don't understand why.
Edit: this is similar code without erb references, tried on codeply and I have same behaviour:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand ms-auto" href="http://www.foodissey.it">Foodissey</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="nav navbar-nav mx-auto">
<a href="#" class="nav-link " %> Uno </a>
<a href="#" class="nav-link " %> due </a>
<a href="#" class="nav-link " %> tre </a>
<a href="#" class="nav-link " %> quattro </a>
</div>
<div class="nav navbar-nav me-auto">
<a href="#" class="nav-link " %> login </a>
</div>
</div>
</div>
</nav>

Answer 1

Your markup is slightly off for bootstrap 5:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand d-flex w-50 me-auto" href="http://www.foodissey.it">Foodissey</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse w-100" id="navbarSupportedContent">
<div class="nav navbar-nav w-100 justify-content-center">
<a href="#" class="nav-link " %> Uno </a>
<a href="#" class="nav-link " %> due </a>
<a href="#" class="nav-link " %> tre </a>
<a href="#" class="nav-link " %> quattro </a>
</div>
<div class="nav navbar-nav ms-auto w-100 justify-content-end">
<a href="#" class="nav-link " %> login </a>
</div>
</div>
</div>
</nav>
With the corresponding codepen: https://codepen.io/james00794/pen/KKWvdoV.
Note the justify-content-* classes - these are key to position things when using flex layouts in bootstrap 5.