cssレイアウトについて

Question

前提・実現したいこと

cssについてです。
ヘッダー部分のリンク(logout,dashboard等)の部分を右端に寄せたいです。
PCの画面でも画面を小さくしても、文字の配列を変えずに右端に寄せられるようにしたいのですが、どこを対象にcssコードを入れたらいいでしょうか。

リンクはすべて横一列に配置したいです。

該当のソースコード

  <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 {
  margin-left: 50%;
}

.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;
}

試したこと

コードに載せている通り

.collapse {
  margin-left: 50%;
}

とするとPC画面の時は思い通りの配列と配置になるのですが、画面を小さくするとログアウト等の配列がおかしくなります。

PC画面

小さい画面

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[Lhankor_Mhy]

bootstrapを使っているのではありませんか？

[tetsuya7724]

bootstrapを使っています。ただ画面を小さくしても配列は変わらないようにしたかったので入れています。
スマホでも表示できるようにしたいので、bootstrapは外せないです。

[Lhankor_Mhy]

bootstrapにはCSSが含まれていますから、その影響を受けてスタイルが変わります。
質問本文でその旨の補足をした方が、回答がしやすいかと思います。

[tetsuya7724]

なるほど、わかりました。

Answer 1

「質問への追記・修正の依頼」を拝見しまして、Bootstrapを用いているとのこと。
Bootstrapでは、
.d-none .d-sm-none .d-md-none .d-lg-none .d-xl-none

のように、画面サイズによって、要素をdisplay:none;するクラスがあります。

スマホ画面でもヘッダー部分を全て消したくないとなると、

① navをハンバーガーメニューにして、そこにナビアイテムを入れる

②文字をめちゃくちゃ小さくして何とか横一列にする

とか考えられます。

それ以外、例えば、「画面が小さくなってもLOGOUT、DASHBOARDだけは消したくない」

という場合には、LOGOUT、DASHBOARD以外のナビアイテムに.d-sm-noneや.d-md-none

をつけるといいんではないでしょうか。