我将正文和 html 的边距和填充设置为 0。但是，(我在 macbook pro 上)每当我将页面向右或向左拖动时，都会出现一个空白(或者我有正文/html 的任何颜色背景设置为。另一个问题是，当我放开熨平板中心的左侧时，它本身隐藏了正在显示的 body/html 的额外部分，但它继续显示在右侧。它不会立即显示当你打开网页。我希望足够详细。感谢您的帮助!
这里是jsfiddle: https://jsfiddle.net/y4nww4d1/
下面是 HTML 和 CSS:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ESQ_Main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<title>ESQ BUILDS:HOME</title>
</head>
<body>
<div class="menu">
<div class="row">
<div class = "col-md-2">
</div>
<div class = "col-md-2">
<a class="btn" href="https://www.google.com/">Home</a>
</div>
<div class="col-md-2">
<a class="btn" href="https://www.google.com/">About</a>
</div>
<div class = "col-md-2">
<a class="btn" href="https://www.google.com/">Services</a>
</div>
<div class="col-md-2">
<a class="btn" href="https://www.google.com/">Conact Us</a>
</div>
<div class="col-md-2">
</div>
</div>
</div>
<div class="header">
<div class="container">
<h1>
ESQ Builds
</h1>
<h4>
A boutique construction company.
</h4>
</div>
</div>
<div class="label">
<h2>
Overview
</h2>
<p>
Our company is dedicated to ...
</p>
</div>
<div class="services">
<div class="row">
<div class="col-md-4 col-xs-6">
<h2>
Build.
</h2>
<p>
We have years of experience transforming ideas and creativity in to homes for a lifetime. We will work with you to make your dream a reality.
</p>
<div class="row">
<div class="col-md-6 col-xs-9">
<a class="btn" href="https://www.google.com/">Learn More</a>
</div>
<div class="col-md-6 col-xs-9">
<a class="btn" href="https://www.google.com/">Projects</a>
</div>
</div>
</div>
<div class="col-md-4 col-xs-6">
<h2>
Tour.
</h2>
<p>
Come view our current projects in person. We offer lovely townhomes and a brand new neighborhood.
</p>
<div class="row">
<div class="col-md-6 col-xs-9">
<a class="btn" href="https://www.google.com/">Learn More</a>
</div>
<div class="col-md-6 col-xs-9">
<a class="btn" href="https://www.google.com/">Projects</a>
</div>
</div>
</div>
<div class="col-md-4 col-xs-6">
<h2>
Partner.
</h2>
<p>
We work with companies to construct the facilities they need to acheive their goals.
</p>
<div class="row">
<div class="col-md-6 col-xs-9">
<a class="btn" href="https://www.google.com/">Learn More</a>
</div>
<div class="col-md-6 col-xs-9">
<a class="btn" href="https://www.google.com/">Projects</a>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<h5>
ESQ Builds
</h5>
<p>
Website/ Design by Alejandro Esquino
</p>
</div>
</body>
</html>
html,body{
margin:0;
background-color:gray;
}
/*MENU*/
.menu{
width:100%;
height:50px;
background-color:gray;
text-align:center;
margin-bottom:0px;
}
.menu .row{
padding-top:10px;
}
.menu .btn{
color:white;
font-size:20px;
}
/*HEADER*/
.header{
height:600px;
background:url("http://esqbuilds.com/images/luxury-builder-houston2.jpg");
background-size:cover;
margin-top:0px;
}
.header
/*LABEL*/
.label{
}
/*Services*/
.services{
}
/*FOOTER*/
.footer{
}
/*BUTTON*/
.btn:link{
text-decoration:none
}
.btn:hover{
}
.btn:active{
}
.btn:visited{
}
最佳答案
您的 .menu 和 .services 部分缺少 .container 包装元素 .row 您正在使用。
似乎您正在使用 Bootstrap 网格，但没有将这些 .row 元素包装在 .container 中。所以 .row 上的负边距，margin-right: -15px; 和 margin-left: -15px; 导致您的 .row 超出其宽度。看看https://getbootstrap.com/css/#grid对于网格标记文档，请注意:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
.container 元素有一个 padding-left: 15px 和 padding-right: 15px 偏移 .row 的负边距。
关于html - 两侧的空白区域 (html/css)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37506206/