Проблемы с выравниванием в html и css

Question

Я пытаюсь написать код для интернет-магазина фитнес-добавок, и когда я создаю панель навигации, возникла эта странная проблема. Неупорядоченный список не выравнивается ни по вертикали, ни по горизонтали.

HTML:

        ДОПОЛНИТЕЛЬ   ПРИНАДЛЕЖНОСТИ   TØJ   ANDET    

CSS:

.menus {
  background-color: #00C9FF;

  height: 42px;
  width: 100%;

  padding: 0;
  margin: 0;

  display: flex;
  flex-direction: row;

  justify-content: center;

  bottom: 0%;
}

.menus ul li {
  list-style: none;

  padding-left: 50px;
  padding-right: 50px;
}

.menus ul {
  display: flex;
  flex-direction: row;

  margin-top: auto;
}

.menus ul li a {
  font-weight: 800;
  font-style: italic;
  font-size: 30pt;

  text-decoration: none;
  color: white;

}

Answer 1

Если вам это нужно:

  body {
    margin: 0;
  }
  .menus {
    background-color: #00C9FF;

    height: 50px;
    width: 100%;

    padding: 0;
    margin: 0;

    display: flex;
    flex-direction: row;

    justify-content: center;

    bottom: 0%;
  }

  .menus ul li {
    list-style: none;

    padding-left: 50px;
    padding-right: 50px;
  }

  .menus ul {
    display: flex;
    flex-direction: row;

    margin-top: auto;
  }

  .menus ul li a {
    font-weight: 800;
    font-style: italic;
    font-size: 30pt;

    text-decoration: none;
    color: white;

  }

<div class="menus">
  <ul menuList>
    <li><a href="index.html" class="menuLinks">SUPPLEMENTER</a></li>
    <li><a href="#" class="menuLinks">ACCESSORIES</a></li>
    <li><a href="#" class="menuLinks">TØJ</a></li>
    <li><a href="signup.html">ANDET</a></li>
  </ul>
</div>

Тогда поле тела не было установлено на 0, и навигационной панели нужно было немного больше высоты.

И да ... код не отвечает.