Using text-align:justify and :after to display equally spaced, justified variable-width navigation links

justify-nav-links.css

* {
    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;
}

justify-nav-links.html

<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>