Nav bar with css grid won't align - html

Question

So I'm trying to make a simple nav bar with the logo on the right and the menu and search option on the left. However I cannot figure out how to vertically align them. I feel like this has probably an easy fix but I just can't figure it out. It's for a school asignment.
Here's my html & css
.main-nav {
display: inline;
text-align: center;
padding: 10px 0px 10px 0px;
margin-top: 20px;
}
.main-nav li {
display: inline;
border: none;
}
.main-nav a {
padding: 10px;
}
.navbardesk {
display: grid;
grid-template-areas: "logo links search";
justify-content: center;
background-color: rgba(141, 125, 31, 0.9);
}
.logo {
display: inline-block;
grid-area: logo;
top: auto;
bottom: auto;
}
.main-nav {
grid-area: links;
background-color: transparent;
}
.searchicon {
grid-area: search;
justify-content: center;
}
<div class="navbardesk v-align">
<h1 class="logo">Buurtsuper Leo van der Drift</h1>
<ul class="main-nav" id="js-menu">
<li>Home</li>
<li>Over ons</li>
<li>Kantoren en bedrijven</li>
<li>Bestellen</li>
<li class="nav-links social"> <i class="fab fa-facebook-square"></i> <i class="fab fa-instagram"></i></li>
</ul>
<i class="fas fa-search searchicon"></i>
</div>
it currently looks like this
and I want it to look like this

Answer 1

Remove h1 and ul margin and try the snippet below.
.main-nav {
display: inline;
text-align: center;
padding: 10px 0px 10px 0px;
margin-top: 20px;
}
.main-nav li {
display: inline;
border: none;
}
.main-nav a {
padding: 10px;
}
.navbardesk {
display: grid;
grid-template-areas: "logo links search";
justify-content: center;
background-color: rgba(141, 125, 31, 0.9);
align-items: center;
padding: .5rem;
}
.logo {
display: inline-block;
grid-area: logo;
top: auto;
bottom: auto;
border: solid;
margin: 0;
padding: 0;
}
.main-nav {
grid-area: links;
background-color: transparent;
border: solid;
margin: 0;
}
.searchicon {
grid-area: search;
justify-content: center;
}
<div class="navbardesk v-align">
<h1 class="logo">Buurtsuper Leo van der Drift</h1>
<ul class="main-nav" id="js-menu">
<li>Home</li>
<li>Over ons</li>
<li>Kantoren en bedrijven</li>
<li>Bestellen</li>
<li class="nav-links social"> <i class="fab fa-facebook-square"></i> <i class="fab fa-instagram"></i></li>
</ul>
<i class="fas fa-search searchicon"></i>
</div>

Answer 2

I can't reproduce the error given the code you have provided but adding align-items:center; should do what you want.
.navbardesk{
display: grid;
grid-template-areas: "logo links search";
justify-content: center;
align-items:center;
background-color: rgba(141,125,31,0.9);
}

Answer 3

make sure, your li, a tag should be display: inline-block it will not work margin, padding in inline display.

Answer 4

I believe this will produce exactly what you are looking for, may be some tweaking you still need depending on your situation
#js-menu {
grid-template-columns: repeat(4,200px);
background-color: #f3f3ec;
justify-items: end;
align-items: center;
display: grid;
}
put this line of code along with your other css. there are many ways around!