How to get rid of white space between the header, top of the viewport and the first image?

Question

I am trying to mimic some sort of parallax effect for my schoolproject. There is only 1 small thing I cannot seem to fix and that is the spacing.

There is white space for no reason above the header, and also right above the image. I know that seperating the header and main gives you this white-line, but I wonder how I can get rid of both white spaces

body {
  height: 100%;
  margin: 0;
}

header {
  background-color: rgb(0, 0, 51);
  width: 100%;
  z-index: 999;
  height: 100hv;
}

.navigatie {
  list-style: none;
  text-align: center;
}

li {
  display: inline-block;
  font-size: 1.5em;
  margin-right: 3.5em;
  font-family: 'Oswald', sans-serif;
}

a {
  text-decoration: none;
  color: rgb(255, 255, 255);
}

a:hover {
  color: rgb(204, 0, 0);
}

.foto1,
foto2,
foto3 {
  position: relative;
  opacity: 0.70;
  background-position: center;
  background-size: cover;
}

.foto1 {
  background-image: url("images/ik.png");
  height: 100vh;
  width: 100%;
}

.foto2 {
  background-image: url("images/ik.png");
  min-height 100%;
}

.foto3 {
  background-image: url("images/ik.png");
  min-height 100%;
}

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">
  <link href="style.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
  <title> - </title>

</head>

<body>
  <!--navigatie-->
  <header>
    <nav>
      <ul class="navigatie">
        <li> <a href="index.html"> home</a></li>
        <li> <a href="about.html"> about me</a></li>
        <li> <a href="contact.html"> contact</a></li>
        <li> <a href="artikel.html"> artikels</a></li>
      </ul>
    </nav>
  </header>


  <main>

    <!--foto 1 + text-->
    <div class="foto1">
      <div class="fototext1">

      </div>
    </div>

    <!--kolomtext-->

    <section class="sectie content1">
      <h1> Welkom op mijn website!</h1>
    </section>

    <!--foto 2 + text-->

    <div class="foto2">
      <div class="fototext2">

      </div>
    </div>

    <!--kolomtext-->

    <section class="sectie content2">
      <h1> Gewoon dingen!</h1>
    </section>

    <!--foto 3 + text-->

    <div class="foto3">
      <div class="fototext3">

      </div>
    </div>

    <!--kolomtext-->

    <section class="sectie content3">
      <h1> mooi toch?!</h1>
    </section>



  </main>



</body>

</html>

My guess is that it probably is the padding somewhere. If you're using chrome you can press F12 and if you click on a button that looks like a mouse on the top left corner of the window that showed up you can hover over elements and see their padding and margin. — ItsaMeTuni, Sep 24 '18 at 12:59

score 2 · Accepted Answer · answered Sep 24 '18 at 13:00

2

by-default ul tag have margin up and bottom so use this css to reset style.

ul.navigatie {
    margin: 0;
}

answered Sep 24 '18 at 13:00

Dhaval Panchal

648
6
26

Can you share link so I can help you. – Dhaval Panchal Sep 24 '18 at 13:06
@vorkot1 it's because you haven't removed the margin from your body, like in the code you posted above – Pete Sep 24 '18 at 13:13
@vorkot1 same thing on your body : margin :0 – Neil Sep 24 '18 at 13:13

score 1 · Answer 2 · answered Sep 24 '18 at 13:00

1

Use a wildcard to remove all margins on everything at the start of your CSS file

* {
    margin: 0;
}

answered Sep 24 '18 at 13:00

CodeBoyCode

2,227
12
29

2

Why would you do this? It's expensive and things should have their natural margins - just override the ones you don't want – Pete Sep 24 '18 at 13:04

How to get rid of white space between the header, top of the viewport and the first image?

2 Answers2