JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="site-logo">Company Name</div>
<nav class="site-nav">
<ul>
<li><a href="draft1-1.html">Home</a></li>
<li><a href="contact.html" class="last">Contact Us</a></li>
<li><a href="#about">About</a></li>
<li><a href="#methodology">Methodology</a></li>
<li><a href="#">Products</a></li>
</ul>
</nav>
</div>
CSS
.container {
max-width: 940px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
border: 1px solid;
}
.site-logo {
font-size: 150%;
}
.site-nav ul {
padding: 0;
margin: 0;
}
.site-nav li {
list-style: none;
display: inline-block;
border-right: 1.5px solid;
margin: 0 0 0 10px;
padding: 0 14px 0 0;
}
.site-nav li:last-child {
border: none;
padding-right: 0;
}