Bootstrap Navbar scheint länger zu sein als der eigentliche Inhalt

Question

Ich bin neu in Bootstrap. Die Navigationsleiste sieht so aus, als wäre sie länger als meine Bildschirmgröße. Der ganz rechte Button wird von der rechten Seite des Fensters überlagert. Allerdings kann ich die Webseite nicht nach rechts scrollen und die gesamte Navigationsleiste sehen. Früher war es in Ordnung aussehen, aber irgendwie schien es so aussehen:

.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>