Как выровнять меню по центру по горизонтали? Изначально элементы списка меню выравнены по левому краю

Question

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: white;
}

.for-links {
  color: white;
  font-size: large;
}

aside {
  border: 3px solid black;
  margin: 20px 20px;
  padding: 20px 20px;
  font-size: larger;
  text-align: center;
}

nav {
  margin-left: 20px;
  margin-right: 20px;
}

nav ul {
  list-style: none;
  background-color: red;
}

nav>ul>li {
  float: left;
  text-align: center;
}

nav ul::after {
  content: "";
  display: block;
  clear: both;
}

nav ul li a {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  color: white;
  width: 125px;
}

nav ul li a:hover {
  background-color: red;
}

nav ul ul {
  display: none;
  position: absolute;
}

nav ul li:hover ul {
  display: block;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Russian Cuisine</title>
  <link rel="stylesheet" href="MainPage-style.css">
</head>

<body>
  <header>
    <aside>
      <p>Here is could be your advertising</p>
    </aside>
  </header>

  <main>
    <nav>
      <ul>
        <li><a href="">About Us</a></li>
        <li><a href="">Food Recipies</a>
          <ul>
            <li><a href="">Soups</a></li>
            <li><a href="">Hot Dishes</a></li>
            <li><a href="">Snacks</a></li>
          </ul>
        </li>
        <li><a href="">Russian Cuisine</a>
          <ul>
            <li><a href="">History of Dishes</a></li>
            <li><a href="">Interesting Facts</a></li>
            <li><a href="">Health Benefits</a></li>
          </ul>
        </li>
        <li><a href="">Contact Us</a></li>
      </ul>
    </nav>
  </main>

  <footer>

  </footer>
</body>

</html>

Answer 1

Немного надо:

nav ul {
  display: flex;
  justify-content: center;
}

и убрать float: left c nav>ul>li.

П.С. почитать про флекс и забыть float навсегда.

БЛОГ НА HUSL

Как выровнять меню по центру по горизонтали? Изначально элементы списка меню выравнены по левому краю

Ответы (1 шт):