JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>



    
   
   
	

<body>
	
	<div id="img-header">
		<img id="logo" src="logo/logo3.png" style="width:350px;height:240px"> 
		<div class="container">
			<div class"row">
				<div class="col-sm-12">
				
					<div id="my-slider" class="carousel slide" data-ride="carousel" style="width:630px;height:240px">
					
						<!-- indicators, small dots -->
						<ol class="carousel-indicators">
							<li data-target="#my-slider" data-slide-to="0" class="active"></li>
							<li data-target="#my-slider" data-slide-to="1"></li>
							<li data-target="#my-slider" data-slide-to="2"></li>
						</ol>
						
						<!-- wrapper for slides -->
						<div class="carousel-inner" role="listenbox">
							<div class="item active">  
								<img src="food/food1.jpg" alt="food 1">
							</div>
							<div class="item">  
								<img src="food/food2.jpg" alt="food 2">
							</div>
							<div class="item">  
								<img src="food/food3.jpg" alt="food 3">
							</div>
						</div>
						
						<!--navigations/ next and prev buttons --> 
						<a class="left carousel-control" href="#my-slider" role="button" data-slide="prev">
							<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
							<!--<span class="sr-only">Previous</span>-->
						</a>
						
						<a class="right carousel-control" href="#my-slider" role="button" data-slide="next">
							<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
							<!--<span class="sr-only">Previous</span>-->
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div id="navbar">
		<ul>
		  <li><a href="#speisekarte">Speisekarte</a></li>
		  <li><a href="#impressim">Impressum</a></li>
		 ...

CSS

#img-header {
	max-width: 1060px ;
	margin-left: auto ;
	margin-right: auto ;   
	}	

 #logo {
	float: left;
	} 
 
 #my-slider {
	float: left;
	}
 
 #navbar {
	max-width: 1000px ;
	margin-left: auto ;
	margin-right: auto ;
	}
 ul {
    list-style-type: none;
    overflow: hidden;
    background-color: #125ea3;
	}

li {
   float: right ;  
	}

li:last-child {
   border-right: none;
	}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
	}

li a:hover:not(.active) {
    background-color: #3594ff;
	}

.active {
    background-color: #3594ff;
	}
 
.text {
	max-width: 1000px ;
	margin-left: auto ;
	margin-right: auto ;
	}

h1 {
	text-align="center"
	
	}

p {
	text-align="center"
	}