CSSを反映させる方法がわかりません

Question

前提・実現したいこと

bootstrapを使ってナビゲーションバーを表示させました。
CSSを適応させて、ナビゲーションバーの幅を広げたいです。
しかし、CSSがうまく反映されません。

該当のソースコード

<div class="container-fluid">
      <div class="row">
        <div class="d-none d-sm-block col-sm">
          <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
              <div class="navbar-nav">
                <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                <a class="nav-item nav-link" href="#">Features</a>
                <a class="nav-item nav-link" href="#">Pricing</a>
                <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
              </div>
            </div>
          </nav>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">

.navbar-nav{
    text-align: right;
    width: 20vw;
}

試したこと

background-colorなどは適応されてるので、cssとの連携はできています。
セレクタの指定などに問題があると考えましたが、調べてもよく理解できませんでした。

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

Djangoを使っています。
ここにより詳細な情報を記載してください。

Answer 1

いまいちイメージが沸きませんが、幅一杯にしてメニュー群を右寄せにしたいのでしょうか？

<div class="navbar-nav justify-content-end flex-grow-1">

Comments

[RyoYo]

そうです。できました！
ちなみに、別のcssファイルに書くときはどうすればいいのでしょうか？
div.navbar-nav{
justify-content-end；
flex-grow-1;
}

これではダメでした。

[m.ts10806]

justify-content-end / flex-grow-1 自体が「別のCSSの指定を取得している」ので、それをまた外に出すというのも変な話かと思いますが。

[yuki84web]

意図は別として別のCSSに書くときは、既に書かれているように navbar-navクラス を指定すれば良いと思います。