0

I have a simple page layout that consists of a header, a main div with the page content and a footer positioned on the bottom of the page. Everything is good but for some reason I have a white gap showing between the main div and the footer, why does it appear and how can I remove it?

This is my html:

body {
  margin: 0px;
  padding: 0px;
}

.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

a {
  display: inline-block;
  margin: 10px;
}

.a-container {
  margin-left: 5%;
}

.logo-section {
  margin-left: 15px;
}

.main {
  min-height: calc(100vh - 70px);
  width: 100%;
  background-color: #EEEEEE;
}

.footer {
  width: 100%;
  height: 50%;
  background-color: black;
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="main.css">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <div class="header">
      <div class="nav">
        <h1>Nip & Tuck</h1>
        <div class="a-container">
          <a>Lifestyle</a>
          <a>Culture</a>
          <a>Sports</a>
          <a>Politics</a>
        </div>
        <div class="logo-section">
          <img src="twitter-logo.png" alt="">
          <img src="second-logo.png" alt="">
          <img src="facebook-logo.png" alt="">
        </div>
      </div>
    </div>
    <div class="main">
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>

      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>

      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>

      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>

    </div>
    <div class="footer"></div>
  </div>
</body>

</html>

and this is my css:

Here is a screenshot of the gap: enter image description here

painotpi
  • 6,894
  • 1
  • 37
  • 70
Mahma Deva
  • 546
  • 2
  • 9
  • 23

1 Answers1

-1

You need to clear the default margin on the p element,

Just update the first css rule to use * instead of just body,

* {
  margin: 0;
  padding: 0;
}

Consider using a reset css to have more consistent outputs on browsers.

* {
  margin: 0px;
  padding: 0px;
}

.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

a {
  display: inline-block;
  margin: 10px;
}

.a-container {
  margin-left: 5%;
}

.logo-section {
  margin-left: 15px;
}

.main {
  min-height: calc(100vh - 70px);
  width: 100%;
  background-color: #EEEEEE;
}

.footer {
  width: 100%;
  height: 50%;
  background-color: black;
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="main.css">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <div class="header">
      <div class="nav">
        <h1>Nip & Tuck</h1>
        <div class="a-container">
          <a>Lifestyle</a>
          <a>Culture</a>
          <a>Sports</a>
          <a>Politics</a>
        </div>
        <div class="logo-section">
          <img src="twitter-logo.png" alt="">
          <img src="second-logo.png" alt="">
          <img src="facebook-logo.png" alt="">
        </div>
      </div>
    </div>
    <div class="main">
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>

      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>

      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>

      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>
      <p>sdasdasdasd</p>

    </div>
    <div class="footer"></div>
  </div>
</body>

</html>
painotpi
  • 6,894
  • 1
  • 37
  • 70