Center UL list items with div both directions

by greatCar

HTML

<div class="outer">
  <nav class="nav-menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>

CSS

.outer {
    border-style: solid;
  border-width: 5px;
 border-color: red;  
  display: flex;               /* Enables Flexbox layout */
  justify-content: center;     /* Centers the navigation horizontally */
  align-items: center;         /* Centers the navigation vertically */
  height: 50vh;               /* Full viewport height for demo purpo*/
  width:50vw;
  background-color: #f0f0f0;   /* Optional styling */
}

.nav-menu ul {
  display: flex;               /* Aligns list items horizontally */
  list-style: none;            /* Removes bullet points */
  padding: 0;
  margin: 0;
}

.nav-menu li {
  margin: 0 15px;              /* Adds spacing between menu items */
}

.nav-menu a {
  text-decoration: none;       /* Removes underline */
  color: #3498db;              /* Optional link color */
  font-size: 18px;             /* Adjust font size */
  font-weight: bold;           /* Optional styling */
}