Bootstrapにおけるnavbarの上部固定について

前提・実現したいこと

Bootstrap4を初めて使用しています。
navをcontainerで囲っている状態で、fixed-topを付与しなければ中央に寄せられ、左右に均等に余白ができます。
しかし、下記のようにfixed-topを付与するとナビの幅が画面いっぱいに表示されてしまいます。
fixed-topを付与しても、中央に寄せて左右に均等に余白を作るにはどのようにすればできますでしょうか。
長い時間調べておりますが、なかなかうまく改善しないため、質問させていただきます。
お手数ですが、何卒よろしくお願いいたします。

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

fixed-topを付与するとナビの幅が画面いっぱいに表示されてしまいます。

該当のソースコード

HTML
1    <header>
2        <div class="container">
3            <nav class="navbar navbar-expand-sm navbar-light bg-light fixed-top">
4                <h1 class="navbar-brand">タイトル</h1>
5                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
6                    <span class="navbar-toggler-icon"></span>
7                </button>
8                <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
9                    <ul class="navbar-nav">
10                        <li class="nav-item">
11                            <a class="nav-link" href="#">テキスト</a>
12                        </li>
13                        <li class="nav-item">
14                            <a class="nav-link" href="#">テキスト</a>
15                        </li>
16                        <li class="nav-item">
17                            <a class="nav-link" href="#">テキスト</a>
18                        </li>
19                        <li class="nav-item">
20                            <a class="nav-link" href="#">テキスト</a>
21                        </li>
22                        <li class="nav-item">
23                            <a class="nav-link" href="#">テキスト</a>
24                        </li>
25                    </ul>
26                </div>
27            </nav>
28        </div><!-- container -->
29    </header>

試したこと

・containerの下層をさらにrowとcolで囲んでcontainerの幅を変更しようとしても改善せず。
・fixed-topを削除し、navに直接style="position: fixed;"を指定してみるも幅が縮んでしまう。

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

・独自CSSは記述していません。
・bootstrapのバージョン：4.3.1

行動規範の内容に同意します

回答1件

ベストアンサー

nav要素に container クラスを付与することで、質問者さんの実現したいことは行えると思います(動作確認用リンク)。

HTML
1<header>
2    <div class="container">
3        <nav class="navbar navbar-expand-sm navbar-light bg-light fixed-top container">
4            <h1 class="navbar-brand">タイトル</h1>
5            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
6                <span class="navbar-toggler-icon"></span>
7            </button>
8            <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
9                <ul class="navbar-nav">
10                    <li class="nav-item">
11                        <a class="nav-link" href="#">テキスト</a>
12                    </li>
13                    <li class="nav-item">
14                        <a class="nav-link" href="#">テキスト</a>
15                    </li>
16                    <li class="nav-item">
17                        <a class="nav-link" href="#">テキスト</a>
18                    </li>
19                    <li class="nav-item">
20                        <a class="nav-link" href="#">テキスト</a>
21                    </li>
22                    <li class="nav-item">
23                        <a class="nav-link" href="#">テキスト</a>
24                    </li>
25                </ul>
26            </div>
27        </nav>
28    </div>
29    <!-- container -->
30</header>