Html 如何删除网页右侧的空白？

这是一项任务，使用Twitter引导设计一个简单响应的网页，其中可折叠的菜单按钮只出现在超小型设备上，而在大型设备上只显示品牌名称。我想我实现了这个目标

但问题是，我的网页右侧有一个恼人的空白区域，跨越所有设备（我使用Chrome开发者工具进行了测试）

任何删除空间的建议，因为它使网页更紧凑，更易于查看。提前感谢。我已经附加了一个空白的图像和一个到我的代码的链接

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>

切换导航





我们的菜单
鸡
我不知道你是谁，但我不知道你是谁。这是一个临时性的解决方案。劳动和纤毛中的同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧。临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产

牛肉
我不知道你是谁，但我不知道你是谁。这是一个临时性的解决方案。劳动和纤毛中的同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧。临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产

寿司
我不知道你是谁，但我不知道你是谁。这是一个临时性的解决方案。劳动和纤毛中的同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧。临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产

链接到HTMl和CSS代码

链接到图像

---

编辑：非常感谢大家！！今天学到了新东西

删除CSS中的这一行

CSS

---

根据你的JSFIDLE，标签在部分（鸡肉、牛肉、寿司）下。您有h4 css，带有相对位置和“左：40%；”

给你所有的h4标签一个类（例如“菜单标题”）。 并给出下面的CSS

.menu-title {
  position: static;
  text-align: center;
}

---

希望有帮助

尝试添加如下Div：

<div class="container">
  <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"><!--  Add this Div-->
    <h2>Our Menu</h2>
    <div class="row">
      <section id="chicken" class="col-md-4 col-sm-6 col-xs-12">
      <h4>Chicken</h4>
      <!-- following codes -->

    </div>
  </div>
</div>

我们的菜单
鸡

请参见下面的H4样式：

h4{
    position: relative;
    /* left: 40%;*/ /* this is the issue */
    font-weight: bold;
    color: #0b2730;
  text-align:center; /* if you want to center the text */
    /*background-color: #e1e6ed;
    margin: 0px;*/
}

---

您需要知道的是，web中的HTML元素有默认CSS值，这些值在开发人员工具中隐藏了一点。

对于您的示例，您需要添加两件事：首先删除

正文的默认边距

。这将删除视口边缘的白色间隙

body {
  margin: 0;
}

其次，您的

h4

被向右拉，因为

left:40%

，要使它们灵活居中，请在所有视口上查看代码：

h4 {
    position: relative /* remove this */;
    left: 40%; /* remove this */

    text-align: center; /* add this */
}

---

请记住，这是一种更好的方法，可以在类中设置样式，如

。将标题居中

，并在其中添加所需的样式。然后，您只需复制和粘贴，无需担心。

这是一个解决方案

/*html
{
溢出x：隐藏；
溢出y：滚动；
}*/
身体{
字体系列：“Comfortaa”，草书；
}
/*标题部分*/
#名牌{
位置：相对位置；
底部：20px；
左：1px；
文字装饰：无；
}
美国海军有限责任公司{
边界半径：0px；
}
}
#导航表{
边缘顶部：10px；
}
#导航列表a{
文本对齐：居中；
背景色：#e1e6ed；
字体大小：1.1米；
字体大小：粗体；
}
#导航列表a：悬停{
背景色：#96d4e8；
}
/*标题段末尾*/
/*仅适用于超小型设备*/
@介质（最大宽度：500px）{
h1{
字体大小：7vw；
}
氢{
字体大小：7vw；
}
}
/*正文部分的开头*/
氢{
边缘顶部：10px；
边缘底部：20px；
文本对齐：居中；
字体大小：粗体；
字体颜色：#0b0821；
}
.世界其他地区部分{
}
.世界其他地区第p节{
文本对齐：对齐；
背景色：#e1e6ed；
}
h4{
位置：相对位置；
字体大小：粗体；
颜色：#0b2730；
/*背景色：#e1e6ed；
边际：0px*/
}
/*主体部分末端*/

切换导航





我们的菜单
鸡
我不知道你是谁，但我不知道你是谁。这是一个临时性的解决方案。劳动和纤毛中的同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧。临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产

牛肉
我不知道你是谁，但我不知道你是谁。这是一个临时性的解决方案。劳动和纤毛中的同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧。临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产临时不动产
h4 {
    position: relative /* remove this */;
    left: 40%; /* remove this */

    text-align: center; /* add this */
}