JSFiddle - React, Tailwind, and code Playground

HTML

<header>
	<div class="left">
	  <li><img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png"></li>
	</div>
	<div class="right">
	  <ul>
		<li><a class="active" href="#home">Matcha</a></li>
		<li><a href="#news">News</a></li>
		<li><a href="#contact">Contact</a></li>
		<li><a href="#about">About</a></li>
		</ul>
	</div>
</header>

CSS

header{
    width: 100%;
    height: auto;
    text-align: center;
    display: inline-block;
}

header ul {
    list-style-type: none;
    text-align: center;
    padding: 0.5vw;
    overflow: hidden;
}

header li {
   display: inline;
}

header li a{
    display: inline-block;
    color: #262626;
    text-align: center;
    padding: 0.5vh 0.5vw;
    text-decoration: none;
}

header .left {
    padding-left: 15%;
    float: left;
}

header .right {
    float: right;
    padding-right: 25%;
}

header img {
  width: 10%;
}