bootstrap 要素の寄せ方

Question

       <header class="sticky-top">
        <div class="container p-0 m-0" id="header_container">
         <nav class="navbar navbar-expand-sm navbar-light">
           <a href="#top" class="navbar-brand"><h2 class="mb-0">Enjoy Your Dinner</h2></a>
           <button class="navbar-toggler" data-toggle="collapse" data-target="#menu">
            <span class="navbar-toggler-icon"></span>
           </button>
           <div id="menu" class="float-right collapse navbar-collapse">
             <ul class="navbar-nav">
               <li class="nav-item"><a href="#top" class="nav-link">Home</a></li>
               <li class="nav-item"><a href="#profile" class="nav-link">Profile</a></li>
               <li class="nav-item"><a href="#skills" class="nav-link">Skills</a></li>
               <li class="nav-item"><a href="#contact" class="nav-link">Contact</a></li>
               <li class="nav-item"><a href="#mission" class="nav-link">Mission</a></li>
             </ul>
           </div>
         </nav>
        </div>
       </header>

header {
  background-color: rgb(245,245,245);
  margin: 0 auto;
  width: 85%;
  border-radius: 3px;
  box-shadow: 2px 0 rgba(0,0,0,.5);
}

header h2 {
  font-size: 20px;
}

ulタグの中の要素を右寄せにしたいのですが、float-right text-centerを試したのですが変化なしでした。
cssでfloat: right; text-align: center; なども試しましたが同じでした。
他に方法はありますでしょうか？　回答よろしくお願いします。

イメージとしては、Home Profile Skills Contact Mission を右寄せにしたいです。

Comments

[mutsuki22]

試したCSSや現状のCSSを追記頂けると答えやすいかと思います。

[m.ts10806]

「ダメでした」「うまくいきませんでした」
他人には何も伝わらない表現方法なので、具体的に起きた現象を書いてください。あくまで淡々と。
レイアウトの問題なので「現在こうなっている（画像）、こうしたい（画像）」となっていたほうが的確な回答を得られやすいです。
それに「ulクラス」というのは存在しませんのできちんと使い分けをしたりコード内のクラス名を挙げるなどしてください。

質問は編集できますので適宜ご対応ください（ここでのコメントに対しては質問を編集して返すのが通例です）

[gakukozuki]

分かりくい質問で申し訳ないです。修正しました。

Answer 1

<div id="menu" class="float-right collapse navbar-collapse">

上記の部分を

<div id="menu" class="d-sm-flex justify-content-end collapse navbar-collapse">

としてみてはいかがですか。

Comments

[gakukozuki]

解決できました。ありがとうございます！

[mutsuki22]

よかったです。
あまり力になれずすみませんでした。

Answer 2

下記を追記した形で出来るようにしたいって事ですかね。

ul {
  text-align: right;
}
 
li {
  display: inline;
}

ーー追記ーー
すみません。
一点抜けてました。
上記にしただけだと、右に寄るだけなので、適度な所になるようにmargin-topはかけて下さい。

Comments

[gakukozuki]

追加しましたが、変化なしでした????

[mutsuki22]

一応記載されたコードで実際に試したらこちらはなったのですが、現状は添付画面の状態ですか？

[gakukozuki]

そうですね、何も変化が起きないです。

[mutsuki22]

実際には上記に記載してるコード以外のコードありますか？
もしあるなら一度上記のコードだけにした上で希望のレイアウトになるかを確認してしてみて、なるなら他の部分が影響してる可能性もある気がします。
そうなるとコード全体をみないと自分ではなんとも言えないです。
すみません。

[gakukozuki]

協力ありがとうございます。
なんとか解決できました。