JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
        <li><a href="">This is item</a></li>
        <li><a href="">This is item</a></li>
        <li><a href="">This is item</a></li>
        <li><a href="">This is item 4 longer</a></li>
        <li><a href="">This is item</a></li>
        <li><a href="">This is </a></li>
        <li><a href="">This</a></li>

    </ul>
</nav>

CSS

nav {
    float: left;
    width:920px;
    height: 39px;
    background: #000;
    -webkit-box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.5);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 20px 0 0 0;
}

nav ul {
    list-style: none;
    margin: 10px 0 0 0;
    padding: 0;
}

nav ul li {
    /*float: left;*/
    padding: 0 10px;
}

nav ul li a {
    font-size: 18px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    display: block;
}


nav {display:table;}
nav ul {display:table-row;}
nav ul li {display:table-cell;}