Logo is not in the same line as the navigation links - html

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">
<img src="./img/logo.png" alt="logo"/>
</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">
<img src="http://placehold.it/120x120" alt="logo" />
</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>