Make list items inside CSS Grid item stay in the center vertically aligned even when resizing viewport width

Hello everyone and a big thank you to everyone who tries to help us newcomers to code.

I am trying to vertically align my list items inside the navbar/grid item.

As you can see, the logo on the left stays there nicely vertically in the middle even if I resize the viewport. But the navigation buttons don’t.

  • The logo and the list items belong to the same grid item.
  • they are both inline
  • they have the same identical instructions set to them

I would put everything inside a pen, but you can’t see it there, you can only see it with inspect element and 50% zoom.

What am I missing?

Thank you!

         * {
            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>

Hi Daniel,
have you considered using flex-box rather than floating?
It would make your life much easier:

  • You can only float left or right, but you could use justify-content: center with flex-box
  • You could remove the positioning and offsetting styles from the list items
  • When displayed on a smaller viewport, you could simply switch the flex-direction
  • You wouldn’t have to set your list-items to display: inline;

You would have to set the nav and the ul to display: flex.
You find a useful guide to using flex-box here:

You can achieve that with floating also, but it would be a little more complicated.

  • You have to clear floats
  • You must set a width attribute for each floated element
  • You should set the inline list-items to text-align: center