centering nav text within a grid

Question

I am trying to equally place my 8 nav links across my nav bar.

Here is my nav HTML:

 <nav>
    <ul class="nav">
      <li><a href="index.html">Home</a></li>
      <li><a href="destinations.html">Destinations</a></li>
      <li><a href="culture.html">Culture</a></li>
      <li><a href="attractions.html">Attractions</a></li>
      <li><a href="history.html">History</a></li>
      <li><a href="media.html">Media</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="links.html">Links</a></li>
   </ul>
 </nav>

I am using a basic grid and am trying to place each of the 8 links equally into 1/8 of the nav.

My css for the grid :

.col-1-8 {
width:12.5% }

I am applying this class to each of the 8 li, but can't seem to get them all centered equally.

If someone could help me out here, i'd be very happy!

thanks

Tim

Answer 1

You can use flex for this.

.nav {
  display: flex;
  justify-content: space-around;
  /* justify-content: space-between; */
  
  background: yellow;
  
  margin: 0;
  padding: 0;
  
  list-style: none;
}

<nav>
    <ul class="nav">
      <li><a href="index.html">Home</a></li>
      <li><a href="destinations.html">Destinations</a></li>
      <li><a href="culture.html">Culture</a></li>
      <li><a href="attractions.html">Attractions</a></li>
      <li><a href="history.html">History</a></li>
      <li><a href="media.html">Media</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="links.html">Links</a></li>
   </ul>
 </nav>