Butoanele asezate in CSS Grid nu stau la mijloc vertical

Salutare tuturor si multumesc celor care vor incerca sa ajute.

In navbar, care de fapt e primul element grid, incerc sa aliniez  si sa stea la mijloc butoanele de navigare atunci cand redimensionez vertical viewport-ul.

Logo-ul sta cuminte acolo in mijloc desi este supus acelorasi conditii.

Se vede cum se misca butoanele doar in Inspect Element si zoom 50%.

* {
			padding: 0;
			box-sizing: border-box;
			border-radius: 5px;
			text-align: center;
		}
	   
			body {
			background: #F7DAD4;
			}
	   
	   
		.grid {
			display: grid;
			height: 98vh;
			grid-template-columns: 1fr 4fr 1fr;
			grid-template-rows: 0.5fr 1fr 3.5fr 1fr;
			grid-gap: 2vh;
			grid-template-areas: "nav nav nav" "header header header" "left main right" "footer footer footer";
		   
	   
		}
	   
		nav {
			background: #0A3409;
			color: #F7DAD4;
			grid-area: nav;
			position: relative;
		}
			   
		.logo {
			float: left;
			position: relative;
			left: 10vw;
			top: 50%;
			transform: translate(0, -50%);
	   
	   
		}
	   
	   
		.logo a {
			color: #F7DAD4;
			text-decoration: none;
			font-family: arial black;
			font-size:  2em;
	   
		}
	   
	   
		ul {
			float: right;
			list-style: none;
		}
	   
	   
		ul li {
			position: relative;
			display: inline;
			right: 10vw;
			top: 50%;
			transform: translate(0, -50%);
			border: 1px solid white;
		}
	   
		li a {
			text-decoration: none;
			color: #F7DAD4;
			font-family: arial;
			font-weight: bold;
			font-size: 1.5em;
			transition: 0.2s;
			border-radius: initial;
			padding: 0 20px;
		}
	   
	   
		li a:hover {
			color: #0A3409;
			background-color: #F7DAD4;
	   
		}
			   
		header {
			background: #0A3409;
			color: #F7DAD4;
			grid-area: header;
	   
		}
	   
		.left {
			background: #FD3A0F;
			color: #F7DAD4;
			grid-area: left;
	   
		}
	   
		main {
			background: #559E54;
			color: #0A3409;
			grid-area: main;
	   
		}
	   
	   
		.right {
			background: #17B814;
			color: #F7DAD4;
			grid-area: right;
	   
		}
	   
		footer {
			background: #0A3409;
			color: #F7DAD4;
			grid-area: footer;
	   
		}
	   
	   
		@media only screen and (max-width: 768px) {
	   
			.grid {
				grid-template-columns: 3fr 2fr;
				grid-template-rows: 0.5fr 1fr 1.75fr 1.75fr 1fr;
				grid-template-areas: "nav nav" "header header" "main left" "main right" "footer footer";
			}
		}
			   
		@media only screen and (max-width: 500px) {
				.grid {
				grid-template-columns: 1fr;
				grid-template-rows: 0.5fr 1fr 3.5fr 1fr 1fr 1fr;
				grid-template-areas: "nav" "header" "main" "left" "right" "footer";
			}
		}

<div class="grid">
	<nav>
		<div class="logo">
			<a href="#">danctes</a>
		</div>
		<ul>
			<li><a href="#">Funny</a></li>
			<li><a href="#">Relatable</a></li>
			<li><a href="#">Dark</a></li>
			<li><a href="#">Latest</a></li>
			<li><a href="#">Best</a></li>
		</ul>
	</nav>
	<header>Header</header>
   
	<div class="left">Left</div>
   
	<main>Main</main>
   
	<div class="right">Right</div>
   
	<footer>Footer</footer>
   
	</div>