屏幕顶部空白 space

Question

我的图像上方出现白色 space。
这是我遇到问题的 CSS 部分：

h1 {
  margin-top: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
}

.button_container {
  max-width: 50%;
}

a {
  text-decoration: none;
  color: #ffffff;
}

a:hover {
  color: #ffffff;
}

.wrapper {
  margin: 0 auto;
  max-width: 100%;
}

.container-fluid {
  overflow: hidden;
  margin: auto;
  padding-left: 0;
  padding-right: 0;
}

.button {
  border: none;
  outline: none;
  border-radius: 25px;
  padding: 1rem 3rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}

img {
  border-radius: 10rem;
  margin-bottom: 10px;
  margin-top: 0px;
  -webkit-box-shadow: 0px 0px 57px 0px rgba(4, 6, 9, 0.25);
  -moz-box-shadow: 0px 0px 57px 0px rgba(4, 6, 9, 0.25);
  box-shadow: 0px 0px 57px 0px rgba(4, 6, 9, 0.25);
}

.button .button_highlight a:hover {
  color: #60737c;
}

.button_highlight {
  background: rgba(253, 80, 76, 1.0);
}

.button_wrapper a:hover {
  color: #c9c9c9;
  text-decoration: none;
}

.cf:after,
.cf:before {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}

#main {
  background-image: url('.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  padding-bottom: 0;
  margin-bottom: 0;
  vertical-align: baseline;
}

#h1_blank {
  margin: 0;
  opacity: 0;
}

#h1_main {
  margin-top: 250px;
  text-align: center;
  color: #ffffff;
  font-size: 50px;
}

#main p {
  font-size: 16px;
  text-align: center;
  color: #ffffff;
  margin-left: 50px;
  margin-right: 50px;
}

#h3_1 {
  text-align: center;
  color: #ffffff;
  font-size: 16px;
}

.button_wrapper {
  text-align: center;
  margin: 3rem 0;
}

#services .service_p {
  color: #414141;
  margin: 0;
}

#services .service_p2 {
  color: #777777;
  margin-bottom: 10px;
}

#services {
  background: #ffffff;
  margin: 0;
  position: relative;
}

#services .service {
  background: #ffffff;
  float: none;
  padding: 3rem 2.5%;
  padding-bottom: 0px;
  text-align: center;
  position: relative;
  /*
      -webkit-box-shadow: 0px 0px 57px 0px rgba(4, 6, 9, 0.25);
      -moz-box-shadow: 0px 0px 57px 0px rgba(4, 6, 9, 0.25);
      box-shadow: 0px 0px 57px 0px rgba(4, 6, 9, 0.25);
      */
  border-radius: .5rem;
}

#services .service_2 {
  background: #ffffff;
  float: left;
  padding: 3rem 2.5%;
  padding-bottom: 0px;
  text-align: center;
  position: relative;
  /*
      -webkit-box-shadow: 0px 0px 57px 0px rgba(4, 6, 9, 0.25);
      -moz-box-shadow: 0px 0px 57px 0px rgba(4, 6, 9, 0.25);
      box-shadow: 0px 0px 57px 0px rgba(4, 6, 9, 0.25);
      */
  border-radius: .5rem;
}

h2 {
  margin-top: 0;
}

#headline_section {
  text-align: center;
  background-color: rgba(253, 80, 76, 1.0);
  color: #fff;
}

#services h3 {
  margin: 0;
  margin-bottom: 2px;
  font-size: 2.5rem;
  color: #414141;
}

#services .button {
  padding: .5rem 2rem;
}

#clients .client_p {
  color: #414141;
  margin: 0 0 0 0;
}

#clients {
  background: #ffffff;
  padding: 0 6.5rem 0;
  position: relative;
}

#clients .client {
  background: #ffffff;
  margin: auto;
  margin-bottom: 35px;
  padding: 6rem 2.5%;
  text-align: center;
  position: relative;
  -webkit-box-shadow: 0px 0px 57px 0px rgba(4, 6, 9, 0.25);
  -moz-box-shadow: 0px 0px 57px 0px rgba(4, 6, 9, 0.25);
  box-shadow: 0px 0px 57px 0px rgba(4, 6, 9, 0.25);
  border-radius: .5rem;
}

#clients .button {
  padding: .5rem 2rem;
}

#h3_cli {
  text-align: center;
  color: #414141;
  margin-bottom: auto;
  margin-bottom: 30px
}

#clients .source {
  color: #606060;
  margin: 0 0 2rem 0;
}

footer {
  color: #ffffff;
  background-color: rgba(253, 80, 76, 1.0);
  margin: auto;
  text-align: center;
}

#footer_h4 {
  text-align: center;
  margin: auto;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<section id="main">
  <h1 id="h1_blank"></h1>
  <h1 id="h1_main">Offical Site</h1>
  <p>Official home page of  <br> Explore the group's social media, merch, and more!</p>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <div class="button_wrapper">
          <a href="socialmedia.html" class="button button_highlight">Social Media</a>
        </div>
      </div>
      <div class="col-sm-12">
        <div class="button_wrapper">
          <a href="merch.html" class="button button_highlight">Merch</a>
        </div>
      </div>
      <div class="col-sm-12">
        <div class="button_wrapper">
          <a href="#" class="button button_highlight" onclick="alert('This action is not yet supported on this site')">About Us</a>
        </div>
      </div>
    </div>
  </div>
</section>
<section id="services" class="cf">
  <div class="container-fluid">

    <h2 id="headline_section">About Us</h2>

    <div class="row">
      <div class="col-sm-4">

        <div class="service">
          <img src=".jpg" alt="" style="width:200px;height:200px;">
          <h3></h3>
          <p class="service_p">Test</p>
          <p class="service_p2"><i>Test</i></p>

        </div>
      </div>

      <div>
        <div class="col-sm-4">

          <div class="service">
            <img src=".jpg" alt="" style="width:200px;height:200px;">
            <h3></h3>
            <p class="service_p">Test</p>
            <p class="service_p2"><i>Test</i></p>
          </div>
        </div>

        <div class="col-sm-4">

          <div class="service">
            <img src=".jpg" alt="" style="width:200px;height:200px;">
            <h3></h3>
            <p class="service_p">Test</p>
            <p class="service_p2"><i>Test</i></p>
          </div>
        </div>
      </div>

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


<section id="clients" class="cf">
  <div class="wrapper">

    <div class="client">
      <h3>Test</h3>
      <p class="client_p">Test</p>


    </div>

  </div>
</section>
</body>
<footer>

  <h4 id="footer_h4">Copyright &copy; 2018</h4>


</footer>

事实是疼痛本身很重要，其次是减肥精英。整而不恨。免费。但是自行车直径之前的比赛。但除非没有人会资助这个元素。自己两箭。这很有趣。不要害怕，但要始终传递信息。质量质量Lacinia 不需要鞠躬。 Class 沉默的伴侣很容易通过我们的婚姻，通过处女座计划转向海岸。

Answer 1

问题是这个...

#h1_main {
  margin-top: 250px;
  text-align: center;
  color: #ffffff;
  font-size: 50px;
}

屏幕顶部空白 space

Blank white space at the top of screen

html

css

removing-whitespace