centering nav text within a grid - html

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>Home</li>
<li>Destinations</li>
<li>Culture</li>
<li>Attractions</li>
<li>History</li>
<li>Media</li>
<li>Contact</li>
<li>Links</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

This code does exactly what you want to obtain, I think that you didn't apply box-sizing border-box or text-align center.
http://codepen.io/anon/pen/WQVQGr
HTML:
<nav>
<ul>
<li>Home</li>
<li>Destinations</li>
<li>Culture</li>
<li>Attractions</li>
<li>History</li>
<li>Media</li>
<li>Contact</li>
<li>Links</li>
</ul>
</nav>
CSS:
*{
box-sizing: border-box;
}
nav ul {
background-color:yellow;
overflow:auto;
list-style:none;
padding: 0;
margin: 0;
width: 800px;
}
nav ul>li {
float:left;
width: 12.5%;
text-align: center
}

Answer 2

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>Home</li>
<li>Destinations</li>
<li>Culture</li>
<li>Attractions</li>
<li>History</li>
<li>Media</li>
<li>Contact</li>
<li>Links</li>
</ul>
</nav>