### 前提・実現したいこと cssについてです。ヘッダー部分のリンク(logout,dashboard等)の部分を右端に寄せたいです。 PCの画面でも画面を小さくしても、文字の配列を変えずに右端に寄せられるようにしたいのですが、どこを対象にcssコードを入れたらいいでしょうか。リンクはすべて横一列に配置したいです。 ### 該当のソースコード ```html

薬物サイト

　　 <% if user_signed_in? %>

<%= link_to "ABOUT", "/posts/about" %>
<%= link_to "DASHBOARD", "/posts/dashboard" %>
<%= link_to "LESSONS", "/posts/lessons" %>
<%= link_to "PROFILE", "/posts/profile" %>
<%= link_to "SETTING", edit_user_registration_path %>
<%= link_to "LOGOUT", destroy_user_session_path, method: :delete %>
<%= link_to "LOGIN", new_user_session_path, class: 'post' %>
<%= link_to "SIGNUP", new_user_registration_path, class: 'post' %>
<%= link_to "ABOUT", "/posts/about" %>

<% end %>

``` ```css .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; } ``` ### 試したことコードに載せている通り ```css .collapse { margin-left: 50%; } ``` とするとPC画面の時は思い通りの配列と配置になるのですが、画面を小さくするとログアウト等の配列がおかしくなります。 PC画面 ![イメージ説明](deed8e560865e97095170cdad1d0279d.png) 小さい画面 ![イメージ説明](d87b2ea8f2a0d26284490410b2bec2c0.png) ### 補足情報（FW/ツールのバージョンなど）ここにより詳細な情報を記載してください。