Flexbox align-items: center-CodePudding

So basically my problem is that whenever I want to use align-items: center with an h1 and a nav-bar, it doesn't work. I mean, it centers both but not quite right. This is the part of the code I'm interested in:

<header >

  <h1>The Code Magazine</h1>

  <nav>
    <a href="blog.html">Blog</a>
    <a href="#">Challenges</a>
    <a href="#">Flexbox</a>
    <a href="#">CSS Grid</a>
  </nav>
</header>

The css should work when I just select the container for both the h1 and the nav, and set it to flex like this:

.main-header { display: flex; align-items: center; }

but when I do that this is the result: This is how it looks

And this is how it's supossed to look:

This is the result I want

Hope someone could help me out here, I'm quite new in CSS. Thanks.

CodePudding user response：

You compare between lower case and upper case, try this https://codesandbox.io/s/dazzling-cache-dds7id?file=/index.html:246-281