Adjust li width fit with ul width of the outer div/body

HTML:-

<nav role='navigation'>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

CSS:-

* {
  box-sizing:border-box;
}
ul {
  width:700px;
  margin:10px auto;
  text-align:center;
}
li {
  list-style:none;
  float:left;
  border:1px solid red;
  padding:10px 0;
}
a {
  background:lightgrey;
  display:block;
}

JavaScript:-

(function( $ ){
  $.fn.autowidth = function() {
    return this.each(function() {        
        $('li', this).css({'width' : (100 / $('li', this).length) + '%'})
    });
  };
})( jQuery );

$(document).ready(function(){
    $('nav > ul').autowidth();    
});