JSFiddle - React, Tailwind, and code Playground

HTML

<div id="head">

		

		</div>
<nav class="menu">
			<ul>
				<li><a href="/index.php">Главная</a></li>
				<li><a href="/gallery.php">Фотогалерея</a></li>
				
			</ul>
		</nav>

CSS

#head 
{	
	position:none;
	height: 242px;
	width: 100%;
	background: url(/image/head.png) repeat-y 50% #4d8795;
	margin: 0;
}

.menu 
{	
	background-color: rgba(0, 0, 0, 0.3);	
	width 100%;	
	height: 34px;	
    margin-top: -34px;
}

.menu ul
{
	list-style-type:none;
	padding-left: 20%;
	margin: 0;	
	background-color: rgba(0, 0, 0, 0.3);	
}

.menu li
{
	display: inline;
	float: left;
	padding: 10px 21px 0 21px;
	min-height: 34px;
	font-family: Minion Pro, sans-serif;
	font-size: 17px;
	text-transform: uppercase;	
}

.menu li a
{
	color: #fff;
	text-decoration: none;	
}