Two navigation and one logo in header - html

Question

I have a problem, I need to do, two navigation and one logo on left side. What I need you can see on image below
I need to do effectively and responsively, when the browser shrinks, gaps will gradually shrink until it jumps to the hamburger menu.
Below you see how I have it now, the picture I need but I do not know how to do it
.site-nav {
width: 100%;
height: 100px;
display: flex;
}
.site-nav .nav-logo {
width: 200px;
height: 100px;
float: left;
display: flex;
}
.site-nav .nav-logo img {
width: 97px;
height: 47px;
margin: auto 0;
}
.site-nav .nav-links {
height: 100px;
float: right;
flex-grow: 1;
}
.site-nav .nav-links ul {
list-style: none;
margin: 0;
padding: 0;
height: 100px;
display: flex;
}
.site-nav .nav-links ul li {
float: left;
margin: auto;
padding-left: 16px;
}
.site-nav .nav-links ul li:not(:last-child) {
padding-right: 16px;
}
<nav class="site-nav">
<div class="container">
<div class="nav-logo">
<img src="logo.png" alt="">
</div>
<div class="nav-links">
<ul class="nav-list">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</nav>

Answer 1

You can use nested flexboxes and media queries to get the desired result. I used dummy images for the logo and the hamburger.
ul {
list-style: none;
margin: 0;
}
.site-nav {
width: 100%;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
width: 80%;
margin: 0 auto;
}
.nav-links {
display: none;
}
.nav-links .nav-list {
display: flex;
flex-wrap: no-wrap;
}
.mobile-menu {
position: relative;
}
.mobile-menu .nav-list {
display: none;
position: absolute;
bottom: -90px;
left: -40px;
}
.mobile-menu:hover>.nav-list {
display: inline-block;
}
.nav-links .nav-list>li:not(:last-child) {
margin-right: 1rem;
}
#media screen and (min-width: 500px) {
.mobile-menu {
display: none;
}
.nav-links {
display: inline-block;
}
}
<nav class="site-nav">
<div class="container">
<div class="nav-logo">
<img src="https://via.placeholder.com/50x50" alt="">
</div>
<div class="mobile-menu">
<img src="https://via.placeholder.com/30x30" alt="">
<ul class="nav-list">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
<div class="nav-links">
<ul class="nav-list">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
<div class="nav-links">
<ul class="nav-list">
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</nav>

Answer 2

How about the following example. With css grid it's easy to specify columns. With extra properties like justify-content you can specify how the columns are spaced.
.site-nav {
width: 100%;
height: 100px;
}
.site-nav .container {
display: grid;
grid-template-columns: 200px 1fr 1fr;
}
.site-nav .nav-logo {
grid-column: 1;
width: 200px;
height: 100px;
float: left;
display: flex;
}
.site-nav .nav-logo img {
width: 97px;
height: 47px;
margin: auto 0;
}
.site-nav .nav-links {
grid-column: auto;
}
.site-nav {
list-style-type: none;
}
.site-nav li {
display: inline-block;
}
<nav class="site-nav">
<div class="container">
<div class="nav-logo">
<img src="https://cdn.pixabay.com/photo/2018/08/19/19/56/peacock-feathers-3617474_960_720.jpg" alt="">
</div>
<div class="nav-links">
<ul class="nav-list">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
<div class="nav-links">
<ul class="nav-list">
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</nav>