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

Question

这是一项使用 Twitter Bootstrap 设计简单响应式网页的作业，其中可折叠菜单按钮仅出现在超小型设备上，而仅出现在较大设备上的品牌名称。我想我实现了这个目标。

但问题是我网页右侧的这个恼人的空白区域，在所有设备上（我使用 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>

Link to HTMl and CSS codehttps://jsfiddle.net/w5v6yr9q/

link to the imagehttps://i.stack.imgur.com/ieRok.png

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

Answer 1

您需要知道的是 Web 中的 HTML 元素有默认的 CSS 值，这些值在开发人员工具中隐藏了一点。 https://www.w3schools.com/cssref/css_default_values

对于您的示例，您需要添加两件事：首先删除body 的默认边距。这将移除视口边缘的白色间隙。

body {
  margin: 0;
}

由于left: 40%，第二次将h4 拉到右侧，以使它们灵活居中，并在所有视口上查看以下代码：

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

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

请记住，在 .center-headline 这样的类上设置样式是一种更好的方法，并在那里添加您需要的样式。然后，您只需复制和粘贴，无需担心。

Answer 2

在 CSS 中删除这一行

CSS

h4{
left:40%;/*remove this*/
}

Answer 3

根据您的 jsfiddle，部分（鸡肉、牛肉、寿司）下的标签。你有 h4 css，位置相对，“left: 40%;”。

给你所有的h4标签一个类（例如“menu-title”）。 并给出下面的 CSS

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

希望对你有帮助

Answer 4

尝试像这样添加一个 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>

Answer 5

请在下方查看您的 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;*/
}

Answer 6

这里有一个解决方案https://jsfiddle.net/w5v6yr9q/2/

/*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;
	font-weight: bold;
	color: #0b2730;
	/*background-color: #e1e6ed;
	margin: 0px;*/
}
/*End of Body Section*/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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 class="text-center">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 class="text-center">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 class="text-center">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>

从h4 中的CSS 中删除left:40%;

在HTML h4 标签中使用bootstrap class text-center。这是一种干净的方法。