0

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

Community
  • 1
  • 1
Legasov
  • 13
  • 1
  • 1
    Possible duplicate of [Removing body margin in CSS](https://stackoverflow.com/questions/30208335/removing-body-margin-in-css) – Daniel A. White Jul 08 '19 at 18:25
  • You need to add `body { margin: 0; padding: 0 }` – disinfor Jul 08 '19 at 18:25
  • 1
    already have it in * selector at the very start of my css code – Legasov Jul 08 '19 at 19:12
  • Setting the body's margin and padding to 0 will not work in this case as the problem lies with the css of the div that wraps the nav. The body already has a margin and padding of 0 (AFAIK) and margin and padding are not inherited by default. Also, the universal selector will not work for the margin of the div in this case as the margin setting of the div's class will override the margin setting for the universal selector. –  Correia7 Jul 08 '19 at 19:47
  • Which browser(s) are you using? The image works on every browser that I have tried. –  Correia7 Jul 08 '19 at 19:51
  • I used several: chrome, firefox, vivaldi but they work now. Maybe it was a problem with the file. But yeah thanks – Legasov Jul 09 '19 at 17:24

3 Answers3

2

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.

LIGHT
  • 5,604
  • 10
  • 35
  • 78
0

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.

Correia7
  • 364
  • 3
  • 10
0

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;
}
umair
  • 101
  • 1
  • 3