JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
        <li><a href="index.html">Home</a></li><!--
     --><li><a href="about.html">About</a></li><!--
     --><li><a href="portfolio.html">Portfolio</a></li><!--
     --><li id="logo"><a href="index.html"><img src="assets/img/jp-logo.png" /></a></li><!--
     --><li><a href="projects.html">Projects</a></li><!--
     --><li><a href="contact.html">Contact</a></li><!--
     --><li><a href="classlist.html">Class List</a></li> <!--change URL later-->
    </ul>

CSS

#nav{
list-style-type: none; /*gets rid of bullets*/
padding: 0;
text-align:center;
}
#nav li{
display: inline-block; /*display list horizontally*/
            border-color: #FFB405;
border-style: solid;
border-width: 1px 0;

}

#nav #logo{
    border: 0;
}

#nav a{
display: inline-block; /*don't break onto new lines and follow padding accordingly*/
padding:10px;

}