Выровнять элементы заголовка по вертикали gatsby JS, SCSS

Question

У меня есть навигационная панель, которую я сделал в Гэтсби, используя S CSS для стилизации. По какой-то причине элемент "Luke" и остальная часть списка слегка смещены по вертикали. Я не уверен, почему и попробовал вертикальное выравнивание, которое не сработало. Я использую Gatsby, S CSS.

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.s css

.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;
}

Answer 1

Учитывая предоставленный вами код, он уже выглядит вертикально выровненным. Есть ли другие css, влияющие на страницу?

.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;
}

<header class='header'>
  <h1 class='logo'>Luke</h1>
  <nav>
    <ul class='navList'>
      <li>
        <a class='navItem'>Home</a>
      </li>
      <li>
        <a class='navItem'>About</a>
      </li>
      <li>
        <a class='navItem'>Blog</a>
      </li>
      <li>
        <a class='navItem'>Contact</a>
      </li>
    </ul>
  </nav>
</header>