How to ensure that the height of all <h3> tags is consistent

Question

I got the h3 tag. one of the lower I tried using margin: 0 and padding but it didn't work and I don't know where I went wrong.

After removing align-items: center, the height was fixed, but how to make it centered in the image container without destroying the height of h3 Picture

.info-footer {
  background-color: rgba(33, 40, 59, 0.8);
  color: #fff;
  border: 1px solid rgb(53, 56, 72);
  width: 100%;
  height: 14em;
  display: flex;
  justify-content: center;
  gap: 200px;
  padding: 20px 10px;
  align-items:top;
}

<div class="info-footer">
  <div class="info-footer-info">
    <h3>Menu 1</h3>
    <ul>
      <li><a href="#">About us</a></li>
      <li><a href="#">FAQ</a></li>
      <li><a href="#">Terms and Conditions</a></li>
      <li><a href="#">Privacy Policy</a></li>
    </ul>
  </div>
  <div class="info-footer-menu">
    <h3>Menu 2</h3>
    <ul>
      <li><a href="#">Contact us</a></li>
    </ul>
  </div>
</div>

Answer 1

Remove align-items: center; from the .info-footer style.

align-items The function is:

Selecting center means placing the element in the center of the flex container and laying out around this center. In other words, your footer-info and footer-menu are aligned with the center of the flex container, not the starting position.

.info-footer {
  background-color: rgba(33, 40, 59, 0.8);
  color: #fff;
  border: 1px solid rgb(53, 56, 72);
  width: 100%;
  height: 14em;
  display: flex;
  justify-content: center;
  gap: 200px;
  padding: 20px 10px;
}

<div class="info-footer">
  <div class="info-footer-info">
    <h3>Menu 1</h3>
    <ul>
      <li><a href="#">O nas</a></li>
      <li><a href="#">FAQ</a></li>
      <li><a href="#">Regulamin</a></li>
      <li><a href="#">Polityka Prywatności</a></li>
    </ul>
  </div>
  <div class="info-footer-menu">
    <h3>Menu 2</h3>
    <ul>
      <li><a href="#">Kontakt</a></li>
    </ul>
  </div>
</div>