Bootstrapのハンバーガーメニューがクリック前後で位置が違う

Question

HTML,CSS,Bootstrapの質問です。
Bootstrapのハンバーガーメニューがクリック前後で位置がずれてしまいます。
目的はハンバーガーメニューをクリック後の位置にクリック前から配置することです。
間違いが分かる方いらしたら、指摘お願いします。

クリック前

クリック後

ソースコードはこちらです。

  <nav class="navbar navbar-expand-md fixed-top navbar-dark">
        <div class="container-fluid">
          <a class="header-logo navbar-brand" href="#">
            <img src="./img/logo/logo.png" alt="logo">
          </a>
          <button class="navbar-toggler" data-toggle="collapse" data-target="#navRes">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navRes">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item active"><a class="nav-link" href="#">Card</a></li>
              <li class="nav-item"><a class="nav-link" href="#">News</a></li>
              <li class="nav-item"><a class="nav-link" href="#">Price</a></li>
              <li class="nav-item"><a class="nav-link" href="#">Access</a></li>
              <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
            </ul>
          </div>
        </div>
      </nav>

Answer 1

この質問を見てくださった方、申し訳ございません。
単純なミスでした。

Comments

[kei344]

どのように解決したかを回答欄に追記いただけませんか？このページに辿り着いた同じ疑問を持つ人のために、ぜひお願いします。