JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<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>

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:inline-block;
	text-align: justify;

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



}

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