Logo is not in the same line as the navigation links

Question

Made a Website with a header menu which changes to a hamburger menu when I go to mobile version.

The hamburger menu works well, but the logo is not in the same line with the nav-links when I am in the header menu (desktop view) and it does not look appealing.

I could solve with putting the "logo-container" class outside the "navigation" but then the hamburger menu wouldn't work well (because putting the logo-container to the navigation div solved another problem).

.logo-container,.nav-links,.calendar {
  display: flex;
}

.logo-container {
  flex: 1;
  position: relative;
  left: 5%;
}

.logo {
  font-weight: 400;
  margin: 5px;

}

.logo-container img{
  max-width: 120px;
  max-height: 120px;
}

/* Logo container JS*/
.logo-container { display: 'none' }
.logo-container.open { display: 'block' }

nav {
  flex: 2;
}
.nav-links {
  justify-content: space-around;
  list-style: none;
}

.nav-link {
  color: var(--clr-dark);
  font-size:20px;
  text-decoration: none;
  font-weight: 600;
}

<header class="header" id="myHeader">
        
  <nav role="navigation">
    
    <div class="logo-container" id="myLogo"> 
      <a href="#"><img src="./img/logo.png"  alt="logo"/> </a>
    </div>

    <div class="hamburger" id="hamburgerID">
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </div>
    
    <ul class="nav-links">
      <li><a class="nav-link" href="#details">DETAILS</a></li>
      <li><a  class="nav-link" href="#description">DESCRIPTION</a></li>
      <li><a   class="nav-link" href="#aboutus">ABOUT US</a></li>
    </ul>
    
  </nav>
</header>

Answer 1

You can make use of the nested flexbox. The edited code is explained in the comments.

.logo-container,
.nav-links,
.calendar {
  display: flex;
}

.logo-container {
  position: relative;
  left: 5%;
}

.logo {
  font-weight: 400;
  margin: 5px;
}

.logo-container img {
  max-width: 120px;
  max-height: 120px;
}


/* Logo container JS*/

.logo-container {
  display: 'none'
}

.logo-container.open {
  display: 'block'
}

nav {
  flex: 2;
  display: flex; /* Make nav a flexbox container */
}

.nav-links {
  justify-content: space-around;
  list-style: none;
  flex: 1; /* Let it occupy rest of the container */
  align-items: center; /* Align to the vertical center because logo is bigger. */
}

.nav-link {
  color: var(--clr-dark);
  font-size: 20px;
  text-decoration: none;
  font-weight: 600;
}

<header class="header" id="myHeader">

  <nav role="navigation">

    <div class="logo-container" id="myLogo">
      <a href="#"><img src="http://placehold.it/120x120" alt="logo" /> </a>
    </div>

    <div class="hamburger" id="hamburgerID">
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </div>

    <ul class="nav-links">
      <li><a class="nav-link" href="#details">DETAILS</a></li>
      <li><a class="nav-link" href="#description">DESCRIPTION</a></li>
      <li><a class="nav-link" href="#aboutus">ABOUT US</a></li>
    </ul>

  </nav>
</header>