JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div id="header-container">
    	<div id="header-wrap">
    		<div class="left logo logoimg">
        		<img src="http://i.imgur.com/dtMBhKq.png"/>
        	</div>
        	<ul class="nav">
        		<li class="contact">CONTACT</li>
            	<li class="about">ABOUT</li>
            	<li class="portfolio">PORTFOLIO</li>
       		</ul>
        </div>
    </div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique in enim nec molestie. Etiam venenatis urna eget risus lobortis, eu dapibus felis ullamcorper. Nullam quis nulla posuere, gravida ex in, consequat ipsum. Nullam mattis tincidunt diam gravida imperdiet. Mauris eget nibh id diam faucibus pellentesque. Cras sodales neque a sapien scelerisque finibus. Suspendisse at ex ac felis aliquam bibendum. Quisque volutpat eget mauris sit amet porta. Nullam dapibus interdum justo vitae porttitor.

Suspendisse eleifend auctor elit, a efficitur leo vehicula vitae. Vivamus elit eros, eleifend dapibus nisi vitae, egestas condimentum urna. Aliquam mauris lectus, condimentum et augue nec, lacinia posuere odio. Fusce vestibulum gravida lectus. Etiam eu elit arcu. Nunc convallis facilisis nisl, quis venenatis odio tempus non. Etiam in diam a urna convallis varius a vitae nunc. Duis faucibus dui et tellus placerat, eget tincidunt quam tincidunt. Sed a rhoncus massa, vel suscipit lorem. Integer at bibendum risus, ut mollis justo. Ut dictum, lorem eu consequat malesuada, elit ligula congue nisi, eu euismod ipsum neque ut neque. Praesent tristique egestas vulputate.

Morbi dictum molestie porta. Vivamus non sollicitudin magna, a interdum neque. Morbi vehicula lobortis elit quis porttitor. Proin arcu lacus, commodo id mattis quis, semper eget sapien. Nullam varius viverra orci, non dictum urna volutpat sit amet. Vestibulum at volutpat augue. Nunc id facilisis orci, id consequat dolor. Proin non mauris eget lacus suscipit pharetra. Aliquam feugiat erat eget iaculis scelerisque. In hac...

CSS

body {
  	background: #000000;
  	margin: 0;
  	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	color: #FFFFFF;  
	text-align: center;
}

h1 {
	font-size: 24px;
	color: #FF9000;
}

img {
	max-width: 100%;
}

.left {
	float: left;
}

ul{
		padding: 0px 0px 0px;
}

.right.nav {
		float: right;
}

/******************************************************************************/
/* Menus */
/******************************************************************************/
#header-container{
	margin: auto;
	padding: 80px 0px 0px;
	max-width: 1160px;
	width: 100%;
}

#header-wrap{
	padding: 0px 40px 0px;
}

.logo{
	max-width: 440px;
	width: 100%;
}

ul{
		list-style-type:none;
		display: inline-block;
}

.nav{
	float:right;
	list-style-type:none;
	overflow: hidden;	
}

.nav li{
	float:right;
	overflow: hidden;
}

.portfolio{
	color: #00bff3;
	border: 1px solid #00bff3;
	padding: 8px 4px 8px;
	margin-left: 0px;
	width: 87px;
	text-align: center;
}

.about{
	color: #00bff3;
	border: 1px solid #00bff3;
	padding: 8px 4px 8px;
	margin-left: 10px;
	width: 60px;
	text-align: center;	
}

.contact{
	color: #00bff3;
	border: 1px solid #00bff3;
	padding: 8px 4px 8px;
	margin-left: 10px;
	width: 76px;
	text-align: center;
}

.orangebutton{
	color: #FF9000;
	border: 1px solid #FF9000;
	margin: 0px 5px 0px;
}

/******************************************************************************/
/* Media Queries */
/******************************************************************************/
@media only screen and (max-width: 867px) {
#header-wrap{
	padding: 10px;

}

.right{
	float: none;
}

.nav{
float: none;
}

.left {
	float: none;
}
.logo{
	margin:auto;

}
}