bootstrap4,HTML5を使ったフッダーをスマホではみ出さないようにする方法

Question

##質問内容
今,HTML5,bootstrap4を使って,ヘッダーを作っているのですが,
スマホで表示すると,はみ出てしまって,全てが表示できません.
横向きにしたらちゃんと表示されたのですが,
縦むきに表示されるようにしたいです.
##該当コード

    <div class="container-fluid">
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark mt-3 mb-3">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav4" aria-controls="navbarNav4" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">会社名</a>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">ホーム</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        自己紹介
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#">会社名</a>
                        <a class="dropdown-item" href="#">自己紹介1</a>
                        <a class="dropdown-item" href="#">自己紹介2</a>
                        <a class="dropdown-item" href="#">自己紹介3</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">お問い合わせ</a>
                </li>
            </ul>
        </div>
    </nav>    
 </div>

見にくいかもしれないので,githubリンクも載せておきます.
https://github.com/skmkids/test-homepage/blob/master/index.html

Comments

[new1ro]

こちらの手元ではすべてが表示されているようでした。
スマホではみ出しているというキャプチャを貼ってもらったほうが、回答が集まりやすいと思います。

見出しが右側に配置されていることを、「スマホで表示すると,はみ出てしまって,全てが表示できません.」
と表現していますか?

[退会済みユーザー]

修正依頼ありがとうございます。

[退会済みユーザー]

そうです。

Answer 1

こちらを追加してみてください。

.navbar .navbar-toggler {
  position: absolute;
}
.navbar .navbar-brand {
  margin: 0 auto;
}

---

前提として、上記ソースコードははみ出してはいません。
見出しが右に配置されるようになっていたのでmargin: 0 auto;で中央に配置するようにしています。

Comments

[退会済みユーザー]

早速そうさせていただきました。
本当にありがとうございます。