侧面白色space (html/css)

Question

我将正文和 html 边距和填充设置为 0。但是，（我在 macbook pro 上）每当我向右或向左拖动页面时，都会出现白色 space （或者我将 body/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{

}

Answer 1

您的 .menu 和 .services 部分缺少您正在使用的 .row 的 .container 包装元素。

您似乎在使用 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 的负边距。

侧面白色space (html/css)

White space on the sides (html/css)

html

css

removing-whitespace