Using text-align:justify and :after to display equally spaced, justified variable-width navigation links
<ul id="nav">
<li><a href="#">HOME</a></li> <!--
--><li><a href="#">ABOUT</a></li> <!--
--><li><a href="#">BASIC SERVICES</a></li> <!--
--><li><a href="#">OUR STAFF</a></li> <!--
--><li><a href="#">CONTACT US</a></li><!--
--></ul><!--
--><h2>Next element</h2>
* {
padding: 0;
margin: 0;
}
#nav {
text-align: justify;
outline: 1px solid grey;
font-size:0;
}
#nav:after {
content: '';
display: inline-block;
width: 100%;
}
#nav li {
display: inline-block;
background-color: #086CA2;
font-size:1rem;
}
#nav a:link {
display: block;
color: white;
padding: 1em 0;
}