Bootstrap利用時においてログアウトリンクが綺麗に表示されない

Question

Bootstrapで”Navbar fixed”を使っているのですが、ログアウトリンクがうまく表示されません。
以下、①〜④まで試してみたのですが、どれもリンクエラーになったり、微妙に上にいったりします。
マイページリンクのように綺麗に表示されるには、どうすれば良いでしょうか？

上記省略
<ul class="navbar-nav me-auto mb-2 mb-md-0">
 <% if user_signed_in? %>
        <li class="nav-item">
         <a class="nav-link" href= <%= user_path(id: current_user.id) %>><%=current_user.nickname%>さんのマイページ</a>
        </li>
       <%# 正常にマイページに飛ぶ %>

        <li class="nav-item">
         <a class="nav-link" href= <%= destroy_user_session_path %>>ログアウト①</a>
        </li>
        <%# Couldn't find User with 'id'=sign_outになる。ただし表示はこのように白字・中央が良い %>

       <li class="nav-item">
         <a class="nav-link" method="destroy" href= <%= destroy_user_session_path%>  >ログアウト②</a>
        </li>
        <%# Couldn't find User with 'id'=sign_outになる。ただし表示はこのように白字・中央が良い %>

        <li class="nav-item">
         <a class="nav-link"><%= link_to 'ログアウト③', destroy_user_session_path, :method => :delete %></a>
        </li>
        <%# 正常にログアウトできるが、なぜか下に寄る。また、ハイパーリンクになってしまう %>

        <li class="nav-item">
         <a class="nav-link" href=<%= destroy_user_session_path%>><li><%= link_to 'ログアウト④', destroy_user_session_path, :method => :delete %></li></a>
        </li>
        <%# 正常にログアウトできるが、なぜか上に寄る。また、ハイパーリンクになってしまう %>

 <% else %>

        <li class="nav-item">
         <a class="nav-link" href= <%= new_user_session_path %>>ログイン</a>
        </li>
       <%# 正常にログインできる %>

        <li class="nav-item">
         <a class="nav-link" href= <%= new_user_registration_path %>>新規登録</a>
        </li>
      <%# 正常に新規登録できる %>

 <% end %>
</ul>
下記省略