So I am doing a practice landing page for non-existent game and this is the issue I've encountered. The hero-row div is overflowing its header-box container, because it itself is overflowed by its contents header-box contains 2 rows: nav-row and hero-row. They are displayed as flex items and themselves use flex layout inside. The issue seems to be connected to padding of the image azamat-icon. Please help me wrap my head around it, because this sinks contents of hero-row lower than necessary and the header-box is larger than the screen height, despite the heigth: 100vh. Screenshot

Code fot this part of project:

.header-box {
    background-color: grey;
    color: black;
    margin: 0 auto;
    height: 100vh;
}

/************* Nav Bar **************/
.nav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 6rem;
}
.nav-ul {
    font-family: 'bold';
    list-style: none;
    display: flex;
}
.nav-item {
    margin-left: 7rem;
    cursor: pointer;
}

/************* Nav Bar **************/


/************* Logo **************/

.logo {
    font-family: 'scbold';
    font-size: 2rem;
    cursor: pointer;
}

/************* Logo **************/

/******************* Hero Starts ************************/

.hero-row {
    font-family: 'bold';
    display: flex;
    width: 100%;
    overflow: hidden;
}
.hero-content {
    flex: 0 0 50%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 0 5%;
    max-height: inherit;
}
.hero-azamat {
    flex: 0 0 50%;
    overflow: hidden;
    padding: 10%;
    max-height: inherit;
}
.azamat-icon {
    width: 100%;
}
.hero-description {
    font-size: 1.5rem;
    padding-right: 25%;
    margin: 5% 0 10%;
    letter-spacing: 0.01rem;
}

<header>

    <div class="header-box">

      <nav class="nav-row">
        <h1 class="logo">LOGO</h1>
        <ul class="nav-ul">
          <li class="nav-item">About</li>
          <li class="nav-item">Merch</li>
          <li class="nav-item">Purchase</li>
        </ul>
      </nav>

      <div class="hero-row">

        <div class="hero-content">
          <h1 class="hero-heading">
            Start your adventure!
          </h1>
          <p class="hero-description">
            The game is so good and tasty mmm you should definitely try it out baby come on oh i love Freddie Mercury btw
          </p>
          <button class="hero-btn">Buy Now!</button>
        </div>
        
        <div class="hero-azamat">
          <img src="images\164-1648549_8-bit-mario-png-mario-8-bit-png.png" alt="" class="azamat-icon">
        </div>
  
      </div>
      
    </div>

  </header>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

As you can see I've tried a few things to fix the issue as overflow: hidden, didn't work.

CodePudding user response：

Just change

  .header-box {
    height: 100%;
   } 

HTML

 <header>
    
        <div class="header-box">
    
          <nav class="nav-row">
            <h1 class="logo">LOGO</h1>
            <ul class="nav-ul">
              <li class="nav-item">About</li>
              <li class="nav-item">Merch</li>
              <li class="nav-item">Purchase</li>
            </ul>
          </nav>
    
          <div class="hero-row">
    
            <div class="hero-content">
              <h1 class="hero-heading">
                Start your adventure!
              </h1>
              <p class="hero-description">
                The game is so good and tasty mmm you should definitely try it out baby come on oh i love Freddie Mercury btw
              </p>
              <button class="hero-btn">Buy Now!</button>
            </div>
            <div class="hero-azamat">    
            </div>
          </div>
        </div>
      </header>

CSS

.header-box {
    background-color: grey;
    color: black;
    margin: 0 auto;
    height: 100%;
}

/************* Nav Bar **************/
.nav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 6rem;
}
.nav-ul {
    font-family: 'bold';
    list-style: none;
    display: flex;
}
.nav-item {
    margin-left: 7rem;
    cursor: pointer;
}

/************* Nav Bar **************/


/************* Logo **************/

.logo {
    font-family: 'scbold';
    font-size: 2rem;
    cursor: pointer;
}

/************* Logo **************/

/******************* Hero Starts ************************/

.hero-row {
    font-family: 'bold';
    display: flex;
    width: 100%;
    overflow: hidden;
}
.hero-content {
    flex: 0 0 50%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 0 5%;
    max-height: inherit;
}
.hero-azamat {
    flex: 0 0 50%;
    overflow: hidden;
    padding: 10%;
    max-height: inherit;
    background:red;
}
.azamat-icon {
    width: 100%;
}
.hero-description {
    font-size: 1.5rem;
    padding-right: 25%;
    margin: 5% 0 10%;
    letter-spacing: 0.01rem;
}

jsfiddle