align-items: center not working in flexbox

Question

I am trying to vertically align the tex of a nav bar that is in display: flex;. I have used the following code yet the text is still aligned to the top of the nav container and won't move down to the center. Could you please help me understand what I have done wrong? I have tried moving align-items: center; to the nav{} and nav ul li{} in CSS but it doesn't change anything.

nav {
  background-color: aquamarine;
  width: 100%;
  height: 70px;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

nav ul li {
  font-size: 3rem;
}

<nav>
  <ul>
    <li>About Us</li>
    <li>Event Schedule</li>
    <li>Contact Us</li>
  </ul>
</nav>

Answer 1

Just add height: 100% to nav ul

nav {
  background-color: aquamarine;
  width: 100%;
  height: 70px;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}

nav ul li {
  font-size: 3rem;
}

<nav>
  <ul>
    <li>About Us</li>
    <li>Event Schedule</li>
    <li>Contact Us</li>
  </ul>
</nav>

Answer 2

The items are vertically aligned, or at least they try to be, but you have set the font size so large that they break out of your fixed-height container. Possible solutions:

1. Don't set the font-size.
2. Don't fix the height of the parent element.