3
這是一項任務，使用Twitter Bootstrap設計一個簡單的響應式網頁，其中可摺疊菜單按鈕僅出現在額外的小設備上，只是在較大的設備上出現品牌名稱。我認爲我實現了這一目標。如何刪除我網頁右側的空白處？
但問題是這個惱人的白色空間在我的網頁右側，跨所有設備（我使用Chrome開發人員工具測試過）。
任何建議刪除空間，因爲它使網頁更緊湊，很好的view.Thanks提前。我附上了一個空白圖像和一個鏈接到我的代碼。
CSS代碼，
/*html
{
overflow-x: hidden;
overflow-y: scroll;
}*/
body{
font-family: 'Comfortaa', cursive;
}
/*Header Section*/
#brand-name{
position: relative;
bottom:20px;
left: 1px;
text-decoration:none;
}
.nav-LLC{
border-radius: 0px;
}
}
#nav-list{
margin-top: 10px;
}
#nav-list a {
text-align: center;
background-color: #e1e6ed;
font-size: 1.1em;
font-weight: bolder;
}
#nav-list a:hover{
background-color: #96d4e8;
}
/*End of Header Section*/
/* Only for Extra Small Devices*/
@media (max-width: 500px){
h1{
font-size: 7vw;
}
h2{
font-size: 7vw;
}
}
/*Start of Body Section*/
h2{
margin-top: 10px;
margin-bottom: 20px;
text-align: center;
font-weight: bold;
font-color: #0b0821;
}
.row section{
}
.row section p{
text-align: justify;
background-color: #e1e6ed;
}
h4{
position: relative;
left: 40%;*/
font-weight: bold;
color: #0b2730;
/*background-color: #e1e6ed;
margin: 0px;*/
}
/*End of Body Section*/
HTML代碼，
<header>
<nav id="nav-LLC" class="navbar navbar-default ">
<div class="container">
<div class="navbar-header">
<div class="navbar-brand">
<a id="brand-name" href="index.html" ><h1> Food,LLC </h1></a>
</div>
<div class="button-class">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapsable" aria-expanded="false" >
<span class="sr-only"> Toggle Navigation</span>
<span class="icon-bar"></span> <!--Icon Bar is three lines in the icon-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div><!-- Navbar-header -->
<section class="visible-xs">
<div id="nav-collapsable" class="collapse navbar-collapse" >
<ul id="nav-list" class="nav navbar-nav navbar-right">
<li><a href="#chicken"><span>Chicken</span></a></li>
<li><a href="#beef"><span>Beef</span></a></li>
<li><a href="#sushi"><span>Sushi</span></a></li>
<!--<li><a href="#"><span>Cookies</span><br></a></li>-->
</ul>
</div>
</section>
</div>
</nav>
</header>
<div class="container">
<h2>Our Menu</h2>
<div class="row">
<section id="chicken" class="col-md-4 col-sm-6 col-xs-12">
<h4>Chicken</h4>
<p>Do qui nulla et ullamco ut quis excepteur nulla amet. Eiusmod dolore tempor deserunt velit in nulla dolore ut duis dolor. Lorem ipsum duis ea ut occaecat cupidatat sint incididunt laborum ut duis ea cillum excepteur nulla velit ut. Veniam adipisicing proident esse tempor aliquip non nulla laboris esse dolore fugiat nostrud eu nulla consequat ut qui ad. Amet ad sint pariatur aliquip tempor mollit labore minim voluptate fugiat non.<a class="visible-xs" href="#nav-LLC" ><br>Back to top</a></p>
</section>
<section id="beef" class="col-md-4 col-sm-6 col-xs-12">
<h4>Beef</h4>
<p>Do qui nulla et ullamco ut quis excepteur nulla amet. Eiusmod dolore tempor deserunt velit in nulla dolore ut duis dolor. Lorem ipsum duis ea ut occaecat cupidatat sint incididunt laborum ut duis ea cillum excepteur nulla velit ut. Veniam adipisicing proident esse tempor aliquip non nulla laboris esse dolore fugiat nostrud eu nulla consequat ut qui ad. Amet ad sint pariatur aliquip tempor mollit labore minim voluptate fugiat non.<a class="visible-xs" href="#nav-LLC" ><br>Back to top</a></p>
</section>
<section id="sushi" class="col-md-4 col-sm-12 col-xs-12">
<h4>Sushi</h4>
<p>Do qui nulla et ullamco ut quis excepteur nulla amet. Eiusmod dolore tempor deserunt velit in nulla dolore ut duis dolor. Lorem ipsum duis ea ut occaecat cupidatat sint incididunt laborum ut duis ea cillum excepteur nulla velit ut. Veniam adipisicing proident esse tempor aliquip non nulla laboris esse dolore fugiat nostrud eu nulla consequat ut qui ad. Amet ad sint pariatur aliquip tempor mollit labore minim voluptate fugiat non.<a class="visible-xs" href="#nav-LLC" ><br>Back to top</a></p>
</section>
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Link to HTMl and CSS codehttps://jsfiddle.net/w5v6yr9q/
link to the imagehttps://i.stack.imgur.com/ieRok.png
編輯：臨屋你太多人了！今天學到了新東西！
似乎你忘了附件:) –
這是因爲文本雞肉，牛肉和壽司在h4標籤，而不是給左：40％;嘗試text-align：center; – programmingArrow
body元素對大多數瀏覽器都有標準的填充/邊距。添加：body {padding：0;保證金：0; } – Gerard