Bootstrap4 Свернуть меню, подталкивающее контент

Question

Я посмотрел другие форумы, но id не решил мои проблемы.Что происходит, когда в точке останова 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>