Bootstrap Nav中断Navbar容器

Question

我正在尝试创建的响应式引导程序网站存在一个奇怪的问题。我的网站看起来很好但是当我调整到996断点时，导航突然看起来像这样：

但它看起来在codepen上工作正常吗？ https://codepen.io/Sovember/full/GrgrxQ/

为什么它在codepen上工作而不在我的本地？谷歌浏览器可能会添加样式或东西吗？ HTML          

   <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
  <img src="img/brand.jpg" class="navbar-brand" alt="" id="navbar-brand" >
      </div>
    <div class="collapse navbar-collapse" id="myNavbar" >
      <ul class="nav navbar-nav  pull-right" id="myNavbar2"  >
        <li><a href="#About">About</a></li>
        <li><a href="#How">How It Works</a></li>
        <li><a href="#Get">Get Started</a></li>
        <li ><a href="#Contact">Contact</a></li>
      </ul>

    </div>

</nav>
</div>

CSS

.navbar .in .nav li {
   display: inline;
   float: none;
   width:100%;

}


.navbar {


    height: 12%;
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.5);
    background-color:white;
}



#navbar-brand{

    height: 2%;
    width: 39%;
    padding-bottom: 45px;
    padding-top: 5px;
}

.nav li a {

    padding-top: 24px;
    font-size: 1.2em;
    font-weight: bold;

     color:#113672;
  /* First we need to help some browsers along for this to work.
     Just because a vendor prefix is there, doesn't mean it will
     work in a browser made by that vendor either, it's just for
     future-proofing purposes I guess. */
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;

}

.nav > li > a:hover {
  color: #729adb;
  text-decoration: none;
  background-color: white;
}

.nav > li > a:focus {
    color: #729adb;
  background-color: white;
  text-decoration: none;
}