JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="de">
	<head>
  	<meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Portfolio</title>
    <link rel="stylesheet" href="assets/css/main.css">
	</head>
  <body>
  	<header id="page-header" role="banner">
  		<div id="container">
  			
			<div id ="logo" >
				<img src="assets/img/logo.png" /> 
			</div>
			
  			<nav role="navigation">
  				<ul>
  					<li><a href="#">Startseite</a></li>
  					<li><a href="#">Werbebanner</a></li>
  					<li><a href="#">Printdesign</a></li>
  					<li><a href="#">Webdesign</a></li>
  				</ul>
  			</nav>
  		</div>
  	</header>
  	<main role="main">
  		
  	</main>
  	<footer role="contentinfo">
  		<!-- place footer-content here! -->
  	</footer>
  </body>
</html>

CSS

html, body {
	padding: 0;
	margin: 0;
}



#page-header {
	width: 100%;
	height: auto;
	min-height: 650px;
	background: url(../img/bg-header.png) no-repeat center;
	background-size: cover;
}

#page-header .container {
	max-width: 1040px;
	margin: 0 auto;
}

#page-header nav {
	float: right;
	font-family: BEBAS NEUE;
	font-size: 26px;
}


nav ul {
	margin-right: 150px;
	text-align: center;
}
nav ul li {
	list-style-type: none;
	width: 150px;
	float: left;
	display: block;
	text-align: justify;

}
 li a {
	text-decoration: none;
	color: white;
	line-height: 50px;
	padding: 1px; 



}

#logo {
	text-align: center;
	position: absolute;
	margin-left: 150px;
	top: 25px;	
}