Bootstrap Navbar重叠并发生奇怪的崩溃

Question

现在在引导程序上苦苦挣扎了一段时间。 我终于成功地将品牌集中在手机和台式机上！但是，当我在移动设备上按下Navbar切换器时，链接会移到侧面并在导航栏中移动元素，而不是向下移动。我发现它必须与导航栏元素的顺序有关，但是此顺序是我在台式机和移动设备上工作的唯一顺序，而所有其他顺序都以某种方式不在一个位置居中...

有人对改变塌陷有建议吗？

图片：

在这里它与身体元素重叠。.关于如何改变它的任何建议？

这是我的代码（4.2版引导程序）：

<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
    <div class="container flex-nowrap">
<button class="navbar-toggler w-100 text-left" type="button" data-toggle="collapse" data-target="#navbarWebsite">
    <span class="navbar-toggler-icon"></span>
</button>   
 <ul class="nav navbar-nav w-100 collapse navbar-collapse" id="navbarWebsite">
      <li class="nav-item">
        <a class="nav-link" href="#">Work<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-    expanded="false">About</a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="#">My Name</a>
         <a class="dropdown-item" href="#">Contact</a>
        </div>
      </li>
 </ul>
  <a class="navbar-brand  justify-content-center text-center mr-0 active" href="index.html">My Name</a>
  <a target="_blank" class="w-100 pl-0 text-right nav-link" href="http://www.linkedin.com/in/"><img src="img/LN_Logo.png"></a>      
</div>
</nav>  

谢谢大家的建议，一切都让我感激不已！！