align-items center does not work - html

Question

I am trying to vertically center the h1 with the a's in the span but somehow the navigation buttons are a couple pixels higher than the h1. I have tried solving this but i couldn't find a way. So i'm hoping you maybe know what the problem could be.
h1 {
font-family: sans-serif;
font-size: 2em;
font-weight: normal;
}
h1 a {
text-decoration: none;
color: black;
font-size: 1em;
}
.nav {
display: flex;
justify-content: center;
}
.nav nav {
width: 90%;
height: 100px;
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="nav">
<nav>
<div>
<h1>workout</h1>
</div>
<span>
<a id='home' href="index.html">index</a>
<a id='work' href="pricing.html">pricing</a>
<a id='contact' href="schedule.html">schedule</a>
</span>
</nav>
</div>

Answer 1

Just remove .nav div styling for this. check updated snippet below..
h1{
font-family: sans-serif;
font-size:2em;
font-weight:normal;
}
h1 a{
text-decoration: none;
color:black;
font-size: 1em;
}
/*.nav{
display: flex;
justify-content: center;
}*/
.nav nav{
width: 90%;
height: 100px;
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="nav">
<nav>
<div>
<h1>workout</h1>
</div>
<span>
<a id='home' href="index.html">index</a>
<a id='work' href="pricing.html">pricing</a>
<a id='contact' href="schedule.html">schedule</a>
</span>
</nav>
</div>