空白的白色空间在屏幕顶部

Question

我的图像上方有一个空白区域 以下是我遇到问题的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>

Lorem ipsum dolor坐下来，精神上的精神。整数nec odio。 Praesent libero。 Sed cursus ante dapibus diam。塞德尼斯。 Nulla quis sem at nibh elementum imperdiet。 Duis sagittis ipsum。 Praesent mauris。 Fusce nec tellus sed augue semper porta。 Mauris massa。 Vestibulum lacinia arcu eget nulla。类似于每个conubia nostra的taciti sociosqu ad litora torquent，per perosos himenaeos。

Answer 1

问题是这个......

itertools