What is the best way of sizing a header logo in css - html

Question

I can't seem to find a great way of sizing my logo to fit within the header, I am trying to get a result with the logo on the left side of the header and the naviagtion on the right side. I've tried this and it seems to work but I don't know if there's a better way to approach this. If anyone could give some tips it would be greatly appreciated.
My CSS and HTML
a {
text-align: center;
color: #232323;
text-decoration: none;
transition: .1s;
}
button {
border: none;
outline: none;
color: #f3f3f3;
cursor: pointer;
transition: .3s;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
top: 0;
padding: 1em 2em;
max-height: 20%;
width: 100%;
z-index: 2;
background-color: #ffffff;
}
.logo-wrapper {
display: inline-block;
overflow: hidden;
}
.logo-wrapper img {
height: auto;
width: auto;
max-width: 150px;
}
nav {
display: inline-block;
}
.nav-item {
display: inline-block;
margin: 0 1.5em;
}
.get-started {
background-color: #f27649;
padding: 1em 2em;
border-radius: 3em;
}
.get-started:hover {
filter: brightness(85%);
}
<header>
<div class="logo-wrapper">
<a href="/">
<img src="images/devchat.png" alt="DevTalk Logo">
</a>
</div>
<nav>
<ul>
<li class="nav-item">Learning</li>
<li class="nav-item">About</li>
<li class="nav-item">Blog</li>
<li class="nav-item">Explore</li>
<li class="nav-item">Contact</li>
<li class="nav-item">Login</li>
<li class="nav-item"><button class="get-started" href="#">Get Started <i class="fas fa-angle-right"></i></button></li>
</ul>
</nav>
</header>