如何消除顶部多余的空格？

Question

it's me again, as im trying to learn I got to a frustrating part. First theres extra space enter image description here at the top with every browser. I alredy tried body {overflow:auto;} in the css but aparently only works till certain point and desapeared the extra space at the right but not at the top. I already tried resetting the margins and paddings in my css but with no luck. Also for some reason the cover image isn't showing. Any sugestions?

You can check the prokect here: https://github.com/flukec777/MarsLandpage

Answer 1

You need to remove .col class from <div class="col span-1-of-2 bg"> on line 26 .

Editing the .col port in css file can have effect in your other tags as well, as you have used that class elsewhere in the document too.

Answer 2

The extra space is being caused by the .col class in Grid.css. The .col class contains:

.col {
      display: block;
      float:left;
      margin: 1% 0 1% 1.6%;
     }

One solution to this problem is to remove or edit the margin property located in the .col class. You can do this dynamically through JavaScript, of course.

Answer 3

The reason behind extra space on the top is the div with class .col.span-1-of-2.bg inside header we can remove this space using margin .

html, body {
    overflow: initial;
}

header .col.span-1-of-2.bg {
    margin-top: 0;
}