Space navigation evenly across window (responsive) - html

Question

I am trying to space my navigation evenly across the top of my page while eliminated any empty space on the left, right, and between each link. I know I could probably just use the Calc function but it is not supported enough with older versions of browsers so I am looking for an alternative method.
My current code:
.nav {
z-index: 1;
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #252839;
}
.nav ul {
list-style-type: none;
width: 100%;
}
.nav ul li{
color: #b5b5b7;
padding: 15px 0;
font-size: 1.2em;
display: inline-block;
}
.nav ul li:hover {
background-color: #677077;
color: #89C4F4;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Profile</li>
<li>Experience</li>
<li>Abilities</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
Thanks for your help!

Answer 1

Use display:flex and flex-grow: 1 to expand the li elements, then change the a tags within to display: block and center the text.
.nav {
z-index: 1;
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #252839;
}
.nav ul {
list-style-type: none;
width: 100%;
padding: 0;
display: flex;
}
.nav ul li{
flex-grow: 1;
}
.nav ul li a {
display: block;
text-align: center;
color: #b5b5b7;
font-size: 1.2em;
padding: 15px 0;
}
.nav ul li a:hover {
background-color: #677077;
color: #89C4F4;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Profile</li>
<li>Experience</li>
<li>Abilities</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>