navbar bootstapの後に余分なスペースを取り除く

Question

このコードでは、ナビゲーションバー内にロゴを中心としたブートストラップナビゲーションを作成しようとしましたが、ページの右側に余分なスペースがあります。 ナビゲーションバーの後に余分なスペースを修正したいと思います。 このコードでは、ページは右の空きスペースにスクロールします。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 
.navbar { 
 
    text-transform: uppercase; 
 
    background-color: #27B6C9; 
 
    position: relative; 
 
    top: 0px; 
 
    font-size: 14px; 
 
    border-bottom: none; 
 
    margin-bottom: 0px; 
 
    padding: 0px 0px; 
 
    font-weight: 600; 
 
} 
 
.navbar-brand { 
 
    padding: 0 10px; 
 
    height: auto; 
 
} 
 
@media (min-width: 768px) { 
 
    .navbar-nav { 
 
    position: relative; 
 
    right: -50%; 
 
    } 
 
    .navbar-nav > li { 
 
    position: relative; 
 
    left: -50%; 
 
    } 
 
    .navbar-nav > li a { 
 
    line-height: 126px; 
 
    vertical-align: middle; 
 
    padding: 0 18px; 
 
    } 
 
} 
 
@media (min-width: 892px) { 
 
    .navbar-nav > li a { 
 
    padding: 0 30px; 
 
    } 
 
} 
 
@media (min-width: 1100px) { 
 
    .navbar-nav > li a { 
 
    padding: 0 40px; 
 
    } 
 
}

<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand hidden-sm hidden-md hidden-lg" href="#"> 
 
     <img src="https://raw.githubusercontent.com/reactjs/redux/master/logo/logo.png" alt="WPO LOGO" width="80" /> 
 
     </a> 
 
    </div> 
 
    <div class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#about">About</a> 
 
     </li> 
 
     <li><a href="#services">Services</a> 
 
     </li> 
 
     <li><a href="#policies">Policies</a> 
 
     </li> 
 
     <li class="hidden-xs"> 
 
      <a href="#"> 
 
      <img src="https://raw.githubusercontent.com/reactjs/redux/master/logo/logo.png" alt="Brand" width="80" /> 
 
      </a> 
 
     </li> 
 
     <li><a href="#calendar">Calendar</a> 
 
     </li> 
 
     <li><a href="#faq">FAQ</a> 
 
     </li> 
 
     <li><a href="#contact">Contact</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

Answer 1

私は新しいクラスMR0を追加して、あなたのCSSで、ボタンのナビゲーションバー

コピーでこのクラスを、それを追加し、ボタン

.mr0{ 
margin-right:0pxImportant; 
} 

<button type="button" class="navbar-toggle mr0" data-toggle="collapse" 

をrelpace