Bootstrapでカスタマイズしたnavを中央寄せにしたい

実現したいこと

メニューバーを中央寄せにしたい

前提

Bootstrapを勉強していています
いまメニューバーをカスタマイズしているのですがどうしても中央寄せに出来ません
どうすればいいのでしょうか？

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

エラーは出ていません

該当のソースコード

html
1    <nav class="navbar navbar-expand-sm">
2        <div class="container-fluid">
3            <a class="navbar-brand" href="#">TOP</a>
4            <button class="navbar-toggler text-center" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
5                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" 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                </ul>
20            </div>
21        </div>
22    </nav>

試したこと

classにtext-centerを入れたりCSSで

CSS
1.navbar-nav .nav-link {
2  text-align: center;
3}

と記述してみたり

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

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

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

回答1件

ベストアンサー

justify-content-center flex-grow-0あたりを使ってみてはどうでしょうか。

html
1    <div class="container-fluid justify-content-center">
2      <a class="navbar-brand" href="#">TOP</a>
3      <button class="navbar-toggler text-center" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
4        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
5        <span class="navbar-toggler-icon"></span>
6      </button>
7      <div class="collapse navbar-collapse flex-grow-0" id="navbarNav">