JSFiddle - React, Tailwind, and code Playground

HTML

<header>
		<div class="container">
			<nav> 
				<ul class="menu menu_left">
					<li>
						<a href="#">Павильон №1</a>
					</li>
					<li>
						<a href="#">Павильон №2</a>
					</li>
					<li>
						<a href="#">Расположение залов</a>
					</li>
				</ul>
				<ul class="menu menu_right">
					<li>
						<a href="#">Фотогаллерея</a>
					</li>
					<li>
						<a href="#">Контакты</a>
					</li>
					<li>
						<a href="#">Карта проезда</a>
					</li>
				</ul>
			</nav>
		</div>
	</header>
	<section>
		<div class="container">ewfwefew</div>
	</section>
	<section>
		<div class="container">wefwefwef</div>
	</section>
	<section>
		<div class="container">ewfwef</div>
	</section>
	<section>
		<div class="container">wefwe</div>
	</section>
	<section>
		<div class="container">14dwd</div>
	</section>
	<section>
		<div class="container">wqdwq</div>
	</section>
	<footer>
		<div class="container">wqdqw</div>
	</footer>

CSS

body {
	font-family: Arial, sans-serif;
	padding: 0;
	margin: 0;
}

div {
	box-sizing: border-box;
}

header {
	background: url(../img/sky.jpg) no-repeat center top / cover;
	height: 600px;
}

.container {
	width: 100%;
	max-width: 1410px;
	margin: 0 auto;
}

nav {
	#padding: 115px 80px 0px 80px;

}

/*.logo {
	padding-top: 115px;
} */

.menu {
	padding: 0;
	margin: 0;
	display: block;
	background: #D32D43;
	width: 548px;
}

.menu_left {
	float: left;
}

.menu_right {
	float: right;
}

.menu li {
	display: block;
	float: left;
	padding: 40px 17px 40px 17px;
}

.menu li a {
	color: #FEF5F6;
	text-decoration: none;
	text-transform: uppercase;
}

.menu li a:hover {
	padding: 5px;
	color: #D32D43;
	background: #FEF5F6;
	border-radius: 10px; 
}