Bootstrap4折叠菜单推送内容

Question

我确实看过其他论坛但是id并没有解决我的问题。发生了什么事情，在bootstrap的sm断点处，汉堡包菜单点击后，将所有标题内容（按钮+ h1）推到中间并且它破坏了页面的设计，我该如何解决这个问题？

这是我的HTML代码：

           <nav class="navbar navbar-expand-md navbar-dark">
              <a class="navbar-brand m-0" href="#">
                <img src="images/Untitled-2.png" style="width:235px">
              </a>

              <button class="navbar-toggler" type="button" 
                 data-toggle="collapse"         
                  data-target="#navbarSupportedContent" 
                  aria-controls="navbarSupportedContent" 
                  aria-expanded="false" 
                  aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
              </button>       

              <div class="collapse navbar-collapse 
                id="navbarSupportedContent">

             <ul class="navbar-nav mx-auto">
                  <li class="nav-item active">
                    <a class="nav-link" href="#">HOME<span class="sronly">(current)</span></a>
                  </li>

                  <li class="nav-item">
                    <a class="nav-link" href="#">ABOUT</a>
                  </li>

                  <li class="nav-item dropdown">
                     <a class="nav-link dropdown-toggle" href="#" 
                         id="navbarDropdown" role="button" 
                         datatoggle="dropdown" 
                         aria-haspopup="true" 
                         aria-expanded="false">
                    WORK</a>

                     <div class="dropdown-menu" 
                         arialabelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">GALLERY</a>
                        <a class="dropdown-item" href="#">VIDEO</a>
                     </div> 
                   </li>

                   <li class="nav-item">
                     <a class="nav-link" href="#">CONTACT</a>
                   </li>
           </ul>