Something on my website is bothering me.
The last menu item of my Navbar is outside it’s container’s background:

Here is how my CSS looks like:

.nav-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 280px;
    position: absolute;
    top: 80px;
    left: -100%;
    opacity: 1;
    transition: all 0.5s ease;
    align-items: space-evenly;
  }

  .nav-menu.active {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    background: #242222;
    left: 0;
    opacity: 1;
    transition: all 0.5s ease;
    z-index: 1;
  }

  .nav-links {
    text-align: center;
    padding: 2rem;
    width: 100%;
    display: table;
  }

  .nav-links:hover {
    background-color: #fff;
    color: #242424;
    border-radius: 0;
  }

  .navbar-logo {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(25%, 50%);
  }

  .menu-icon {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(-100%, 60%);
    font-size: 1.8rem;
    cursor: pointer;
  }

  .fa-times {
    color: #fff;
    font-size: 2rem;
  }

  .nav-links-mobile {
    display: block;
    text-align: center;
    margin: 2rem auto;
    border-radius: 4px;
    width: 80%;
    text-decoration: none;
    font-size: 1.5rem;
    background-color: transparent;
    color: #fff;
    padding: 14px 20px;
    border: 1px solid #fff;
    transition: all 0.3s ease-out;
  }

  .nav-links-mobile:hover {
    background: #fff;
    color: #242424;
    transition: 250ms;
  }
}

and HTML generated by a React component looks like this:

<>
  <nav className='navbar'>
    <div className='navbar-container'>
      <Link to='/' className='navbar-logo' onClick={closeMobileMenu}>
        LOGO
      </Link>
      <div className='menu-icon' onClick={handleClick}>
        <i className={click ? 'fas fa-times' : 'fas fa-bars'} />
      </div>
      <ul className={click ? 'nav-menu active' : 'nav-menu'}>
        <li className='nav-item'>
          <Link to='/' className='nav-links' onClick={closeMobileMenu}>
            Home
          </Link>
        </li>
        <li className='nav-item'>
          <HashLink to='/#wherewefly' onClick={closeMobileMenu} className='nav-links'>
            Where we fly
          </HashLink>
        </li>
        <li className='nav-item'>
          <Link
            to='/services'
            className='nav-links'
            onClick={closeMobileMenu}
          >
            Promotions
          </Link>
        </li>
        <li className='nav-item'>
          <Link
            to='/products'
            className='nav-links'
            onClick={closeMobileMenu}
          >
            Contact
          </Link>
        </li>
      </ul>

      {button && <Button buttonStyle='btn--outline'>LOGIN</Button>}
    </div>
  </nav>
</>

How can I make the last menu item (Contact) be covered by the black background too?

I have tried changing the height but the menu items "follow" and are aligned to the bottom. I can’t find out how to change it though.

Edited: Picture has been updated

>Solution :

Remove height: 280px;.

You are using flex-box so you shouldn’t be setting the height or width attributes. The idea is to allow the box to be flexible to it’s contents.

If you want a fixed height you should be using flex-basis attribute.

EXAMPLE

I have had to convert your react to html to demonstrate but as you can see the code you provided works as expected. This would indicate the issue lies elsewhere in code you have not provided.

.nav-menu {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: absolute;
  top: 80px;
  left: -100%;
  opacity: 1;
  transition: all 0.5s ease;
  align-items: space-evenly;
}

.nav-menu.active {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  background: #242222;
  left: 0;
  opacity: 1;
  transition: all 0.5s ease;
  z-index: 1;
}

.nav-links {
  text-align: center;
  padding: 2rem;
  width: 100%;
  display: table;
}

.nav-links:hover {
  background-color: #fff;
  color: #242424;
  border-radius: 0;
}

.navbar-logo {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(25%, 50%);
}

.menu-icon {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(-100%, 60%);
  font-size: 1.8rem;
  cursor: pointer;
}

.fa-times {
  color: #fff;
  font-size: 2rem;
}

.nav-links-mobile {
  display: block;
  text-align: center;
  margin: 2rem auto;
  border-radius: 4px;
  width: 80%;
  text-decoration: none;
  font-size: 1.5rem;
  background-color: transparent;
  color: #fff;
  padding: 14px 20px;
  border: 1px solid #fff;
  transition: all 0.3s ease-out;
}

.nav-links-mobile:hover {
  background: #fff;
  color: #242424;
  transition: 250ms;
}

<nav class='navbar'>
  <div clas='navbar-container'>
    <a class='navbar-logo'> LOGO
    </a>
    <div class='menu-icon'>
      <i class='fas fa-times' />
    </div>
    <ul class='nav-menu active'>
      <li class='nav-item'>
        <a class='nav-links'> Home
        </a>
      </li>
      <li class='nav-item'>
        <a class='nav-links'>
          Where we fly
        </a>
      </li>
      <li class='nav-item'>
        <a class='nav-links'> Promotions
        </a>
      </li>
      <li class='nav-item'>
        <a class='nav-links'> Contact
        </a>
      </li>
    </ul>

    <Button class='btn--outline'>LOGIN</Button>
  </div>
</nav>