JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <div id="nav-container">
      <nav>
        <ul>
        	<li><img src="img/logo.png" id="logo"></li>
            <li>link</li>
            <li>link</li>
            <li>link</li>
            <li>link</li>
            <li>link</li>
            <li><img src="img/menu.png" id="menu-button"></li>
        </ul>
      </nav>
    </div>
  </header>
  <div id="top-spacer"></div>

CSS

header {
  position: fixed;
  width: 100%;
  height: 2.5em;
  background-color: #202020;
}
#top-spacer {
  height: 2.5em;
  width: 100%;
}
#logo {
  width: auto;
  height: 2.5em;
}
#nav-container {
  display: inline-block;
  width: 100%;
}
nav {
    float: left;
    display: inline-block;
    width: 100%;
    height: 0.5em;
    vertical-align: top;
    padding: 0;
    margin: 0 auto;
}
nav ul{
	width: 100%;
	display: block;
    float: left;
     background-color: blue; 
    padding: 0;
}
nav li {
	float: left;
	padding: 0;
	width: 14%;
	margin: 0;
	border: 1px solid black;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
    list-style: none;
}
nav li:first-of-type{
	border: 1px solid #fff;
	/*width: 14%;*/
}
nav li:last-of-type{
	border: 1px solid #fff;
	/*width: 14%;*/
}
#menu-button {
  display: inline-block;
  width: auto;
  height: 2.5em;
  float: right;
  opacity: 0.3;
  transition: opacity 1s;
}
#menu-button:hover {
  opacity: 1;
}