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 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>
<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 {
min-width:1000px;
max-width:1280px;
margin:0 auto;
text-align: justify;
}
#header_main-nav ul {
display:inline;
margin:0;
padding:0;
}
#header_main-nav ul li {
display: inline;
}
#header_main-nav ul li a {
display:inline-block;
font-size:13px;
margin-top:18px;
max-width: 109px;
vertical-align: middle;
margin-top: 0px;
text-align: left;
font-weight:bold;
color:#fff;
text-transform:uppercase;
}
.current a {
background:blue;
}
a:hover {
text-decoration:none;
}
#header_main-nav span {
display:inline-block;
width:100%;
height:0;
font-size:0;
}