ヘッダー部分のレイアウト

Question

前提・実現したいこと

cssについてです。
ヘッダーのリンクを横一列にしたかったので、displayで横一列にしました。
ただ、よく見るとlogin,signup,aboutの配置とlogout,dashboard等の配置が違っています。
同じnavbarを対象にcssを入れているのになぜこのようなことが起こるのでしょうか？
login,signupと同じ配置にlogout等を配置したいのですが、どのようにしたらいいでしょうか？
（ちなみにこれらのリンクはログインしてないとloginの表示、ログインしているとlogoutの表示がされるようにしています。）

発生している問題・エラーメッセージ

該当のソースコード

<header>

    <div class="container header-title">
      <div class="navbar navbar-expand-sm">
      <a class="eden" href="/">薬物サイト</a>
      <div class="collapse navbar-collaps" id="navbarNav">
　　      <% if user_signed_in? %> <!-- ユーザーがログインしているか調べる -->
  <ul class="navbar-nav ml-auto">
  <!-- ユーザーがログインしていた時の処理 -->
  <li class="nav-item">
    <%= link_to "ABOUT", "/posts/about" %>
  </li>
    <li class="nav-item">
    <%= link_to "DASHBOARD", "/posts/dashboard" %>
  </li>
  <li class="nav-item">
    <%= link_to "LESSONS", "/posts/lessons" %>
  </li>
    <li class="nav-item">
    <%= link_to "PROFILE", "/posts/profile" %>
  </li>
  <li class="nav-item">
    <%= link_to "SETTING",  edit_user_registration_path %> <!-- ログアウトをする -->
  </li>
  <li class="nav-item">
    <%= link_to "LOGOUT", destroy_user_session_path, method: :delete %> <!-- ログアウトをする -->
  </li>
  <% else %>
  <!-- ユーザーがログインしていなかった時の処理 -->
  <li class="nav-item">
    <%= link_to "LOGIN", new_user_session_path, class: 'post' %> <!-- ログイン画面に移行する -->
  </li>
  <li class="nav-item">
    <%= link_to "SIGNUP", new_user_registration_path, class: 'post' %> <!-- 新規登録画面に移行する -->
  </li>
    <li class="nav-item">
    <%= link_to "ABOUT", "/posts/about" %>
  </li>

  </ul>
<% end %>
</div>
</div>
</div>
  </header>

.navbar{
  display: flex;
}

/*.collapse{

}*/


.navbar li{
  float: left;
  padding-right: 10px;
}

.eden{
  color: white;
  text-decoration: none;
  font-size: 30px;
}

.navbar-nav a{
  color: white;
  text-decoration: none;
}

body {
  background-color: #01805A;
}

.nav-item{
  list-style: none;

}

.nav-item a{
  color: white;
  text-decoration: none;
}

.log{
  color: white;
  text-decoration: none;
}

.copyright{
  text-align: center;
}

Comments

[Lhankor_Mhy]

Rails について詳しくないので教えていただきたいのですが、その if 不成立の時にも ul の開始タグは出力されるものなのですか？
私が知ってる言語のテンプレートレンダラであれば、出力しないと思います。

[tetsuya7724]

すみません。自分も初心者なので、その点はわからないです。
Lhankor_Mhyさんが知っているテンプレートレンダラはどのようなコードになっていますか？

[Lhankor_Mhy]

うーん、丁寧すぎてわかりにくい言い方でしたかね？

では、くだけた感じで言うと、そこたぶん間違ってるから出力確認してみたら？、ということです。

[tetsuya7724]

<% if %>
<ul>
...
</ul>
<%else %>
<ul>
...
</ul>
<% end %>
としたら直りました。
ありがとうございます。

[Lhankor_Mhy]

ご解決されて何よりです。
自己解決の手続きをお願いします。
https://teratail.com/help#resolve-myself