JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header_main-nav-holder">
				<div id="header_main-nav">
					<ul>
						<li><a href="#">Эластичные и эластомерные материалы</a></li>
						<li><a href="#">Фасадные краски и штукатурка</a></li>
						<li class="current"  ><a href="#">Внутренние краски</a></li>
						<li><a href="#">Грунты и специальные материалы</a></li>
						<li><a href="#">Декор</a></li>
						<li><a href="#">Гидроизоляция</a></li>
						<li><a href="#">Шпаклевки готовые</a></li>
						<span></span>
					</ul>
					</div><!--end header_main-nav-holder-->
			</div><!--end header_main-nav-->

CSS

#header_main-nav-holder{
	min-width:1000px;
	max-width:100%;
	background:orange;
	height:58px;
}


#header_main-nav ul{
	min-width:1000px;
	max-width:1280px;
	margin:0 auto;
    display: table;
	text-transform: uppercase;
	list-style-type: none;
	height: 58px;
	font-weight:bold;
}

		
#header_main-nav ul :first-child {
	padding: 0;
}

#header_main-nav ul li:first-child {
	text-align:left;
}

#header_main-nav ul li:last-of-type{
	text-align:right;
}


#header_main-nav ul li  {
	margin: 0;		
	width: auto;
	display: table-cell; 
	text-align: center;	
	height: 50px; 
	padding-left: 2px; 
	vertical-align: bottom; 
}

#header_main-nav ul li a {
    width: 182.8px;
	height: 58px;
	display: table-cell;
	vertical-align: middle; 
	font-size:12px;
	color: #fff;
	text-decoration: underline;
}
#header_main-nav ul li a:hover {
    text-decoration:none;
}

#header_main-nav .current a {
	background:black;
	opacity:0.5;
	filter: alpha(opacity=50);
	color:#fb7822 !important;
}