如何摆脱右侧的空白？

Question

我在我的工具栏下方的右侧找到了这张神秘的白色空间，旁边有一张我应该延伸到边缘的图片。它几乎就像我的导航栏延伸太远了。我几乎没有注意到这一点，因为您需要滚动到右侧才能看到它。我试图在照片和导航栏上播放宽度。同样的事情也出现在页脚，它似乎与照片，使我相信它的导航栏延长。我曾尝试删除导航栏中的一些内容，但似乎没有解决问题的方法。

HTML：

<div class="row"> 
    <nav class="navbar navbar-custom" role="navigation"> 
     <div class="navbar-header-xs"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="collapse navbar-collapse" id="collapse"> 
      <ul class="nav navbar-nav"> 
       <li><a href="index.html"><img src= "images/logo.png" /></a></li> 
       <li><a href="stuff.html">Work</a></li> 
       <li><a href="stuff.html">About</a></li> 
       <li><a href="stuff.html">Skills</a></li> 
       <li><a href="stuff.html">Contact</a></li> 
      </ul> 
     </div> 
    </nav> 
</div> 
<div class="top"> 
    <img src= "images/picture.png" class="img-responsive" /> 
</div> 
<div id="footer"> 
    <div class="container"> 
     Footer stuff 
    </div> 
</div> 

CSS：

body { 
    padding: 0px; 
    margin-top: align; 
    background size: 100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
} 
.navbar { 
    margin-bottom: 0; 
    max-width: 100%;  
} 
.navbar-custom { 
    background-color:#CCE1F4; 
    border-radius:2px; 
    font-size: 22px; 
} 
.navbar-custom .navbar-brand { 
    color: #2f4f7f; 
} 
.navbar-custom .navbar-nav > li > a { 
    color: #2f4f7f; 
} 
.navbar-custom .navbar-nav > li > a:hover, 
.navbar-custom .navbar-nav > li > a:focus { 
    color: #000000; 
    background-color: transparent 
} 
.navbar-custom .navbar-toggle { 
    border-color: #2f4f7f; 
    float: left; 
    margin-left: 40px; 
} 
.navbar-custom .navbar-toggle:hover, 
.navbar-custom .navbar-toggle:focus { 
    background-color: #2f4f7f; 
} 
.navbar-custom .navbar-toggle .icon-bar { 
    background-color: #2f4f7f; 
} 
.navbar-nav > li{ 
    align: left; 
    padding-left:15px; 
    padding-right:25px; 
    padding-top:5px; 
} 

.top { 
    max-width: 100%; 
} 

@media only screen and (min-width:400px) { 
    .text-left {font-size:140%;} 
} 

@media only screen and (min-width:770px) { 
    .text-left {font-size:170%;} 
} 

@media only screen and (min-width:400px) { 
    .intro {font-size:230%;} 
} 

@media only screen and (min-width:770px) { 
    .intro {font-size:270%;} 
} 

#footer { 
    height: 60px; 
    background-color: #f5f5f5; 
} 

.left { 
    float:left; 
    align: left; 
} 
.right { 
    float:right; 
} 

Answer 1

你不需要一排（导致溢出）您navbar之外，我不相信这是一类.navbar-header-xs刚navbar-header，我会为你的CSS添加一些一致性，只要选择性。

在Snippet中查看不同宽度的工作示例。

body { 
 
    padding: 0px; 
 
    margin-top: align; 
 
    background size: 100%; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    background-size: cover; 
 
    -o-background-size: cover; 
 
} 
 
.navbar.navbar-custom { 
 
    margin-bottom: 0; 
 
    max-width: 100%; 
 
} 
 
.navbar.navbar-custom { 
 
    background-color: #CCE1F4; 
 
    border-radius: 2px; 
 
    font-size: 22px; 
 
} 
 
.navbar.navbar-custom .navbar-brand { 
 
    color: #2f4f7f; 
 
} 
 
.navbar.navbar-custom.navbar-nav > li > a { 
 
    color: #2f4f7f; 
 
} 
 
.navbar.navbar-custom .navbar-nav > li > a:hover, 
 
.navbar.navbar-custom .navbar-nav > li > a:focus { 
 
    color: #000000; 
 
    background-color: transparent 
 
} 
 
.navbar.navbar-custom .navbar-toggle { 
 
    border-color: #2f4f7f; 
 
    float: left; 
 
    margin-left: 40px; 
 
} 
 
.navbar.navbar-custom .navbar-toggle:hover, 
 
.navbar.navbar-custom .navbar-toggle:focus { 
 
    background-color: #2f4f7f; 
 
} 
 
.navbar.navbar-custom .navbar-nav > li { 
 
    text-align: left; 
 
    padding-left: 15px; 
 
    padding-right: 25px; 
 
    padding-top: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <nav class="navbar navbar-default navbar-custom" role="navigation"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-nav1"> 
 
     <span class="sr-only">Toggle navigation</span> 
 

 
     <span class="icon-bar"></span> 
 

 
     <span class="icon-bar"></span> 
 

 
     <span class="icon-bar"></span> 
 

 
     <span class="icon-bar"></span> 
 

 
     </button> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="bs-nav1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li> 
 
      <a href="index.html"> 
 
      <img src="http://placehold.it/20x20" /> 
 
      </a> 
 

 
     </li> 
 
     <li><a href="stuff.html">Work</a> 
 

 
     </li> 
 
     <li><a href="stuff.html">About</a> 
 

 
     </li> 
 
     <li><a href="stuff.html">Skills</a> 
 

 
     </li> 
 
     <li><a href="stuff.html">Contact</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
</div> 
 
<div class="container"> 
 
    <div class="top"> 
 
    <img src="http://placehold.it/1850x750/f00/fff" class="img-responsive" /> 
 
    </div> 
 
</div> 
 
<hr> 
 
<nav class="navbar navbar-default navbar-custom" role="navigation"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-nav2"> 
 
     <span class="sr-only">Toggle navigation</span> 
 

 
     <span class="icon-bar"></span> 
 

 
     <span class="icon-bar"></span> 
 

 
     <span class="icon-bar"></span> 
 

 
     <span class="icon-bar"></span> 
 

 
     </button> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="bs-nav2"> 
 
     <ul class="nav navbar-nav"> 
 
     <li> 
 
      <a href="index.html"> 
 
      <img src="http://placehold.it/20x20" /> 
 
      </a> 
 

 
     </li> 
 
     <li><a href="stuff.html">Work</a> 
 

 
     </li> 
 
     <li><a href="stuff.html">About</a> 
 

 
     </li> 
 
     <li><a href="stuff.html">Skills</a> 
 

 
     </li> 
 
     <li><a href="stuff.html">Contact</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 
<div class="container"> 
 
    <div class="top"> 
 
    <img src="http://placehold.it/1850x750/f00/fff" class="img-responsive" /> 
 
    </div> 
 
</div>