在移动设备中打开时，Navbar内容不会保持在同一条线上

Question

此引导导航栏在桌面上看起来很好，但在移动设备上查看时不会保持在同一条线上。这是我的代码：

HTML：

    <div class="container-fluid"> <!--div1-->
  <div class="row"> <!--div3-->
    <nav class="navbar navbar-fixed-top navbar-custom">
      <div class="navbar-header"> <!--div2-->
        <a class="navbar-brand name-box" href="#">
          Text </a>
      </div> <!--div2-->
      <ul class="nav navbar-nav navbar-right">
        <li><a class="name-box" href="#">About</a></li>
        <li><a class="name-box" href="#">Portfolio</a></li>
        <li><a class="name-box"href="#">Contact</a></li>
      </ul>
    </nav>
  </div> <!--div3-->
</div> <!--div1-->

CSS：

.navbar-custom {
  background-color: #2F4F2F;
}
.name-box {
  font-family: Georgia;
  color: silver;
  border-right: 1px solid silver;
}

Answer 1

.navbar-nav { }

中的问题

<强>之前

之后我添加了

.navbar-nav {
  margin: 0 !important;
}