Bootstrap navbar кажется длиннее фактического содержания

Question

Я новичок в Bootstrap. Навигатор выглядит так, что он длиннее моего размера экрана. Его правая кнопка перекрывается правой стороной окна. Однако я не могу прокрутить веб-страницу справа и увидеть весь навигатор. Раньше выглядеть хорошо, но почему-то казалось, выглядеть следующим образом:

.navbar { 
 
    padding-top: 6px; 
 
    padding-bottom: 4px; 
 
    box-shadow: 0px 1px 5px gray; 
 
    background-color: rgba(244, 139, 139, 0.8); 
 
} 
 
.nav.navbar-nav.navbar-right a { 
 
    margin-right: 2px; 
 
    color: white; 
 
    font-size: 30px; 
 
    font-family: Phenomena-Bold; 
 
} 
 
.navbar-collapse .navbar-nav > li > a:hover { 
 
    color: #3b3c3d; 
 
} 
 
.navbar-collapse .navbar-nav > li > a:active { 
 
    color: #3b3c3d; 
 
} 
 
span.glyphicon-user { 
 
    font-size: 20px; 
 
} 
 
span.glyphicon-shopping-cart { 
 
    font-size: 20px; 
 
} 
 
.navbar-toggle .icon-bar { 
 
    display: block; 
 
    width: 22px; 
 
    height: 2px; 
 
    border-radius: 1px; 
 
    background-color: white 
 
    /* change this to any color you want! */ 
 
    ; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<nav class="navbar navbar-light container-fluid navbar-fixed-top" role="navigation"> 
 
    <div class="row"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav nav-pills navbar-right"> 
 
     <li role="presentation"><a class="page-scroll" href="#">1</a> 
 
     </li> 
 
     <li role="presentation"><a class="page-scroll" href="#">2</a> 
 
     </li> 
 
     <li role="presentation"><a class="page-scroll" href="#">3</a> 
 
     </li> 
 
     <li role="presentation"><a class="page-scroll" href="#">4</a> 
 
     </li> 
 
     <li role="presentation"><a class="page-scroll" href="#"><span class="glyphicon glyphicon-user"></span></a> 
 
     </li> 
 
     <li role="presentation"><a class="page-scroll" href="#"><span class="glyphicon glyphicon-shopping-cart"></span></a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <!-- /.navbar-collapse --> 
 
    </div>

Answer 1

  <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
       </div> 

       <!-- Collect the nav links, forms, and other content for toggling --> 
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
        <ul class="nav navbar-nav nav-pills navbar-right"> 
         <li role="presentation"><a class="page-scroll" href="#">1</a></li> 
         <li role="presentation"><a class="page-scroll" href="#">2</a></li> 
         <li role="presentation"><a class="page-scroll" href="#">3</a></li> 
         <li role="presentation"><a class="page-scroll" href="#">4</a></li> 
         <li role="presentation"><a class="page-scroll" href="#"><span class="glyphicon glyphicon-user"></span></a></li> 
         <li role="presentation"><a class="page-scroll" href="#"><span class="glyphicon glyphicon-shopping-cart"></span></a></li> 
        </ul> 
       </div><!-- /.navbar-collapse --> 
     </div>