Align header elements vertically gatsby JS, SCSS

I have a nav bar that I've made in Gatsby using SCSS to style it. For some reason, the "Luke" element and the rest of the list are slightly misaligned vertically. I'm not sure why and have tried vertical align which didn't work. I'm using Gatsby, SCSS.

header.js

return(
        <header className={headerStyles.header}>
            <h1 className={headerStyles.logo}>Luke</h1>
            <nav>
                <ul className={headerStyles.navList}>
                    <li>
                        <Link className={headerStyles.navItem} activeClassName={headerStyles.activeNavItem} to="/">Home</Link>
                    </li>
                    <li>
                        <Link className={headerStyles.navItem} activeClassName={headerStyles.activeNavItem} to="about">About</Link>
                    </li>
                    <li>
                        <Link className={headerStyles.navItem} activeClassName={headerStyles.activeNavItem} to="blog">Blog</Link>
                    </li>
                    <li>
                        <Link className={headerStyles.navItem} activeClassName={headerStyles.activeNavItem} to="contact">Contact</Link>
                    </li>
                </ul>
            </nav>
        </header>
    )

header.module.scss

.header{
    padding-top: 40px;
    padding-bottom: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-list{
    justify-content: flex-end;
    display: flex;
    list-style-type: none;
    margin: 0;
}

.nav-item{
    color: white;
    font-size: .9rem;
    margin-right: 1.3rem;
    text-decoration: none;
}