0

I have three divs: a nav, and two sections. They are stacked on top of each other, but are showing unexpected white space vertically. I have margins set to 0 auto; so I'm not sure why this is showing.

My goal is to have them stacked on top of one another with no white space in between.

Here is my code:

div.main-navigation-sticky {
  display: block;
  background-color: #000000;
  opacity: 0.6;
  height: 40px;
  margin: 0 auto;
}

div.body-section-1 {
  display: block;
  background-color: #000000;
  min-height: 400px;
  margin: 0 auto;
}

div.body-section-2 {
  display: block;
  background-color: #E0DFFF;
  min-height: 641px;
  margin: 0 auto;
}

div.projects-frame {
  display: block;
  background-color: #FFFFFF;
  min-height: 442px;
  margin: 200px auto;
}

div.body-section-3 {}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>


  <script src="mainscript.js"></script>
  <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

  <link href="style.css" rel="stylesheet">
</head>

<body>
  <div class="main-navigation-sticky">
    <p>Nav</p>
  </div>

  <div class="body-section-1">
    <p>Section 1</p>
  </div>

  <div class="body-section-2">
    <p>Section 2</p>
    <div class="projects-frame">
      <p>Projects frame</p>
    </div>
  </div>

  <div class="body-section-3">
    <p>section 2</p>
  </div>

</body>

</html>

Screenshot

Sunil Chaudhary
  • 4,481
  • 3
  • 22
  • 41
Stefan Miller
  • 3
  • 3
  • Hi Stefan, welcome to SO :) When asking questions like this, a site like JSFiddle is really useful. Check out the fiddle I made for your question: https://jsfiddle.net/2p5y0s7d/ – John Keyes Feb 01 '20 at 23:30

1 Answers1

1

Elements like <p> have default margin and that is what is giving space between divs. In order to change that you can just write p{margin:0;} in your css

Alex
  • 477
  • 4
  • 14