从.info-footer样式中删除align-items: center;。
align-items的作用是：
沿着Flex容器当前行的横轴对齐Flex项。
选择center意味着它将元素放置在flex容器的中心，并在此周围工作。换句话说，您的footer-info和footer-menu将对齐到flex容器的中心而不是开始。

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

为了达到你想要的能够居中的信息，你可以将它们 Package 在另一个div中，这样align-items就不会影响它们

.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:center;
 }
.info-footer-box{
    display: flex;
 }

<div class="info-footer">
      <div class="info-footer-box">
        <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>
    </div>

将align-items：center改为align-items：start和wrap容器中的所有内容。将容器的高度设置为100 vh，然后再次使用flex

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

#container {
  display: flex;
  height: 100vh;
  align-items: center;
}

body,div,html{
margin:0;
padding:0;}

<div id='container'>
  <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>
</div>

总是使用适当的HTML标签。CSS flex将为您对齐这些标签。

footer {
  display: flex;
  justify-content: center;
}

<footer>
  <section>
    <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>
  </section>
  <section>
    <h3>Menu 2</h3>
    <ul>
      <li><a href="#">Kontakt</a></li>
    </ul>
  </section>
</footer>