Hero Section not covering 100% of Display

Question

Okay so, I want my hero section to cover 100% of the screen. Right now I'm trying it with height: (calc 100vh - 90px), the 90px coming from the header. The only problem is, that there is a gap between my hero section and between my "About" section. The cause probably is the custom "line height" and and the negative margin. I have no idea how to achieve this look without it. The gap is also bigger/smaller, depending on the browser.

header{
    width: 100%;
    height: 90px;
    background-color: #191919;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 100px;
}

body{
    background-color: #191919;
}

.logo{
    font-size: 27px;
    font-weight: bold;
    color: #e5e5e5;
    width: 10px;
}

.logo .header-logo{
    width: 110px;
}

.nav-bar .top-bar ul{
    display:flex;
    list-style: none;
}

.nav-bar .top-bar li a {
    display: block;
    color: #e5e5e5;
    font-size: 23px;
    border-radius: 50px;
    transition: 0.2s;
    margin: 0 20px;
    text-decoration: none;
    
}

.nav-bar .top-bar ul li  a:hover{
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 5px;
    transition: 0s;
    
}

.sidebar{
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 100%;
    z-index: 1;
    background-color: #e5e5e5;
    display: none;
}

.nav-bar .sidebar ul{
    display:flex;
    height: 100vh;
    list-style: none;
    flex-direction: column;  
    justify-content: center;
    
}

.sidebar li{
    width: 100%;
    text-align: center;
}

.sidebar li:hover{
    width: 100%;
    text-align: center;
    background-color: lightgrey;
}

.nav-bar .sidebar li a {
    display: block;
    color: #191919;
    font-size: 50px;
    text-decoration: none;
    margin: 50px;
}

.side-divider{
    border: lightgrey 0.5px solid;
    width: 100%;
}


.hamburger .line{
    width: 30px;
    height: 3px;
    background-color: #e5e5e5;
    margin: 5px 0;
    border-radius: 60px;
}

.hamburger{
    display: block;
    cursor: pointer;
    margin-left:  30px;
}

.hamburger-sidebar .line{
    width: 30px;
    height: 3px;
    background-color: #191919;
    margin: 5px 0;
    border-radius: 60px;
}

.hamburger-sidebar{
    display: block;
    cursor: pointer;
    position: absolute;
    right: 50px;
    top: 60px;
}

/*HERO STYLING*/

.hero-section {
    height: calc(100dvh - 90px);
    width: 100%;
}


.hero .oben{
    background-color: #191919;
    width: 100%;
    height: 50%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;

}

.hero .unten{
    background-color: #e5e5e5;
    width: 100%;
}

.hero{
    color: #e5e5e5;
    margin: 0;
    height: 100%;
}

#hero-top{
    width: 100%;
    height: 50%, fit-content;
    background-color: #191919;
}

.padding{
    padding: 0 80px;
}

#hero-digital{
    color: #e5e5e5;
    font-size: 250px;
    font-weight: 600;
    text-align: center;
    padding-top: 80px;
}

#hero-plastic{
    color: #e5e5e5;
    font-size: 150px;
    font-weight: 550;
    padding-left: 121px;
    line-height: 0.75;
    margin-top: -40px;
}

#hero-bottom{
    width: 100%;
    background-color: #e5e5e5;
    height: calc(50% - 70px);
}

#hero-surgery{
    color: #191919;
    font-size: 150px;
    font-weight: 550;
    line-height: 0.75;
    padding-left: 577px;
    margin-top: -7px;
}

#hbd{
    width: 100%;
    background-color: #e5e5e5;
    display: flex;
    flex-direction: row;
    height:50%;
    align-items: end;
}

#hero-bottom-text{
    font-size: 30px;
    color: #191919;
    text-decoration: underline;
    margin-left: 30px;
    margin-bottom: 30px;
    font-weight: 400;
    text-underline-offset: 5px;


}

#hbt{
    height: 50%;
}

.btn{
    background-color: #0714BC;
    height: 40px;
    width: 150px;
    font-size: 20px;
    color: #e5e5e5;
    border-radius: 100px;
    font-weight: 550;
    letter-spacing: 1px;
    border: 0px;
}

#hbt_padding{
    padding: 20px 200px;
    display: flex;
    justify-content: end;
}

#arrow_down{
    width: 50px;
    height: 50px;
    color: #191919;
    flex: 0 1 auto;
    position: absolute;
    left: 50%;
    margin-bottom: 20px;
}

/*About Us Styling*/


#about_us_heading{
    color: #e5e5e5;
    font-size: 40px;
    font-weight: 500;
    letter-spacing: 3px;
}

#about_left{
    justify-content: end;
    display: flex;
    width: 50%;
    display: flex;
    
}

#about_left_padding{
}

#about_us_text{
    font-size: 27px;
    color: #e5e5e5;
    margin-top: 10px;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

#about_img{
    width: 50%;
    display: flex;
    justify-content: end;
}

#about_programmieren{
    width: 650px;
}

#about_us{
    display: flex;
    flex-direction: row;
    flex: 1;
    align-items: center;
    min-height: 600px;  
    margin-top: 100px;
    background-color: #191919;
}

<header>
  <div class="logo">
      <img src="https://fastly.picsum.photos/id/1/5000/3333.jpg?hmac=Asv2DU3rA_5D1xSe22xZK47WEAN0wjWeFOhzd13ujW4" alt="Mike & Mortiz Logo" class="header-logo"> <!-- Alt-Text hinzugefügt -->
  </div>
  <div class="nav-bar">
  <nav class="top-bar">
      <ul>
          <li><a href="">We</a></li>
          <li><a href="">Work</a></li>
          <li><a href="">Services</a></li>
          <li>
              <div class="hamburger" id="hamburger1">
                  <div class="line"></div>
                  <div class="line"></div>
                  <div class="line"></div>
              </div>
          </li>
      </ul>
  </nav>
  </div>
</header>
<section class="hero-section"> 
  <div class="hero">
      <div id="hero-top">
          <div class="padding">
              <div>
                  <h3 id="hero-digital">DIGITAL</h3>
                  <h3 id="hero-plastic">PLASTIC</h3>
              </div>
          </div>
      </div>
      <div id="hero-bottom">
          <div id="hbt">
              <div>
                  <h3 id="hero-surgery">SURGERY.</h3>
              </div>
              <div>
                  <div id="hbt_padding">
                      <button class="btn">Contact Us</button>
                  </div>
              </div>
          </div>
          <div id="hbd">
              <div>
                  <h1 id="hero-bottom-text">Eine Medienagentur aus Stuttgart</h1>
              </div>
              <img src="https://fastly.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68" alt="Pfeil nach unten" id="arrow_down">
          </div>
      </div>
  </div>
</section>
<main>
      <section id="about_us">
          <div id="about_left">
              <div id="about_left_padding">
                  <div>
                  <h2 id="about_us_heading">Mike und Moritz.</h2>
                  </div>
                  <div>
                  <p id="about_us_text">Lorem ipsum dolor sit amet,<br>
                  consetetur sadipscing elitr,<br>
                  sed diam nonumy eirmod tempor <br>
                  magna aliquyam erat, sed diam<br>
                  voluptua.
                  </div>
                  <button class="btn">Learn more.</button>
              </div>
          </div>
          <div id="about_img">
              <img src="https://fastly.picsum.photos/id/1/5000/3333.jpg?hmac=Asv2DU3rA_5D1xSe22xZK47WEAN0wjWeFOhzd13ujW4" alt="Programmieren" id="about_programmieren">
          </div>
      </section>
</main>

I tried changing the height from vh to dvh. Any tips would be appreciated.

Answer 1

In order for your hero section to take up 100% of the screen, not including the header, my recommendation would be to wrap the hero section and the header in another element. Let’s call this new element .first-page. Style .first-page to take up 100% of the screen and make it a vertical flexbox; so its flex children are the header and the hero section. Your header has a fixed height, and you want your hero section to stretch to use the remaining space, so simply style it with flex: 1 (which is shorthand for flex-grow: 1). Now you don’t need any mathematics!

body {
  background-color: #191919;
  margin: 0;
}

.first-page {
  height: 100svh;  
  display: flex;
  flex-direction: column;
}

header {
  height: 90px;
  background-color: #191919;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1em;
}

header>img {
  height: 80%;
}

header>nav {
  display: flex;
  gap: 20px;
}

header>nav a {
  display: block;
  color: #e5e5e5;
  font-size: 23px;
  transition: 0.2s;
  text-decoration: none;
}

header>nav a:hover{
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 5px;
  transition: 0s;
}

.hamburger {
  display: block;
  cursor: pointer;
  margin-left: 30px;
}

.hamburger .line {
  width: 30px;
  height: 3px;
  background-color: #e5e5e5;
  margin: 5px 0;
}

/* Hero */

.hero-section {
  background: green;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
}

/* About Us */

#about_us {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

#about_left {
  padding: 1em;
}

#about_us_heading {
  color: #e5e5e5;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: 3px;
}

#about_us_text {
  font-size: 27px;
  color: #e5e5e5;
  margin-top: 10px;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

#about_programmieren {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="first-page">
  <header>
    <img src="http://picsum.photos/220/110">
    <nav>
      <a href="">We</a>
      <a href="">Work</a>
      <a href="">Services</a>
      <div class="hamburger" id="hamburger1">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
      </div>
    </nav>
  </header>
  <section class="hero-section">
    <p>.hero-section</p>
    <p>This takes up the remainder of .first-page</p>
  </section>
</div>
<main>
  <section id="about_us">
    <div id="about_left">
      <div>
        <h2 id="about_us_heading">Mike und Moritz.</h2>
      </div>
      <div>
        <p id="about_us_text">Lorem ipsum dolor sit amet,<br>
        consetetur sadipscing elitr,<br>
        sed diam nonumy eirmod tempor <br>
        magna aliquyam erat, sed diam<br>
        voluptua.</p>
      </div>
      <button class="btn">Learn more</button>
    </div>
    <div id="about_img">
      <img src="http://picsum.photos/500" id="about_programmieren">
    </div>
  </section>
</main>