我无法从页面顶部删除边距

Question

我无法移除两个边距。页面顶部的一个和我的英雄形象下面的一个。我已经尝试过margin 0，填充0等等。我甚至试图将它从body和html中删除。我该如何解决这个问题？

/* Setting up our grid */

html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  width: 100%;
  /*Set the width of the entire website here */
  margin-right: auto;
  margin-left: auto;
  /*Margin-left and right are set to auto to center the container */
}
.seven:first-child,
.eight:first-child,
.nine:first-child,
.ten:first-child,
.eleven:first-child,
.five:first-child,
.four:first-child,
.three:first-child,
.two:first-child,
.one:first-child,
.six:first-child {
  margin-left: 0;
  /* This line of code makes the left-most column align to the left of the screen */
}
.eleven {
  width: 91.5%;
  float: left;
  margin-left: 2%;
}
.ten {
  width: 83%;
  float: left;
  margin-left: 2%;
}
.nine {
  width: 74.5%;
  float: left;
  margin-left: 2%;
}
.eight {
  width: 66%;
  float: left;
  margin-left: 2%;
}
.seven {
  width: 57.5%;
  float: left;
  margin-left: 2%;
}
.six {
  width: 50%;
  /* This div spans six columns (the entire row)*/
  float: left;
  margin-left: 0%;
}
.five {
  width: 40.5%;
  /* This div spans five columns */
  margin-left: 2%;
  float: left;
}
.four {
  width: 32%;
  float: left;
  margin-left: 2%;
}
.three {
  width: 23.5%;
  float: left;
  margin-left: 2%;
}
.two {
  width: 15%;
  float: left;
  margin-left: 2%;
}
.one {
  width: 6.5%;
  float: left;
  margin-left: 2%;
}
.row {
  width: 100%;
  clear: both;
  /* Clear creates new styles for the next row */
  padding: 0px;
  margin: 0px;
}
header {
  height: 110px;
}
.hero-image {
  height: 767.38px;
  background-image: url(vintagemcdonalds.jpg);
  background-repeat: no-repeat;
}
.row2 .six {
  width: 50%;
  height: 495.56px;
  background-color: grey;
}
.row2 .right {
  width: 50%;
  background-color: blue;
}
.row3 .lower {
  width: 50%;
  height: 495.56px;
  background-color: green;
}
.row3 .corner {
  width: 50%;
  height: 495.56px;
  background-color: black;
}
.follow {
  height: 908px;
  background-color: tan;
}
.bottom {
  height: 169px;
  background-color: grey;
}
footer {
  height: 169px;
  background-color: black;
}

<div class="container">
  <!--everything on the page-->
  <div class="row">
    <div class="hero-image">
      <header>
        <h1>Vintage McDonald's</h1>
      </header>
      <h2>Welcome to McDonald's!<br>Come and try our NEW Big Mac!!!</h2>
    </div>
  </div>
  <!--closing row 1-->

  <div class="row">
    <div class="row2">
      <div class="six">
      </div>
      <div class="six right">
      </div>
    </div>
  </div>
  <!--closing row 2-->

  <div class="row">
    <div class="row3">
      <div class="six lower">
      </div>
      <div class="six corner">
      </div>
    </div>
  </div>
  <!--closing row 3-->

  <div class="row">
    <div class="follow">
    </div>
  </div>
  <!--closing row 4-->

  <div class="row">
    <div class="bottom">
    </div>
  </div>
  <!--closing row 5-->

  <div class="row">
    <footer>
    </footer>
  </div>
  <!--closing row 6-->
</div>

Answer 1

如果我理解正确＆gt;＆gt;＆gt;试试这个： 你的CSS有类：

.hero-image {
    height: 767.38px;
    background-image: url(vintagemcdonalds.jpg);
    background-repeat: no-repeat;
}

删除身高：

.hero-image {
        backgrround-image: url(vintagemcdonalds.jpg);
        background-repeat: no-repeat;
}

并添加新的CSS样式：

h2 {
margin-bottom:0;
}

希望它有所帮助...

UPDATE＆GT;＆GT;＆GT; 试试这个

.hero-image {
            backgrround-image: url(vintagemcdonalds.jpg);
 background-repeat: no-repeat;
 background-size:contain;
    }

OR

.hero-image {
backgrround-image: url(vintagemcdonalds.jpg);
 background-repeat: no-repeat;
 background-size: 100% 100%;
}

Answer 2

试试此链接：https://necolas.github.io/normalize.css/5.0.0/normalize.css 将代码复制并粘贴到新的css文件中，并在任何其他文件之前将其链接。

并尝试从页面顶部删除边距：

.container {
  margin-top: 0;
}

这是英雄形象：

.hero-image header {
  margin-bottom: /* how much ever you want*/
} 

或者如果那不起作用，那么试试这个：

.row {
  margin-bottom: /* how much ever you want*/
}