JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
<ul class="main_menu">
	<li><a href="#">Главная</a></li>
	<li><a href="#">Контакты</a></li>
	<li><a href="#">Пункт меню 1</a></li>
	<li><a href="#">Пункт меню 2</a></li>
	<li><a href="#">Пункт меню 3</a></li>
	<li><a href="#">Пункт меню 4</a></li>
	<li><a href="#">Текст другой длины</a></li>
</ul>
</div>

CSS

*
{
    padding: 0;
    margin: 0;
}

.wrapper
{
    width: 960px;
    margin: 0 auto;
    background: #e6e6e6;
}

.main_menu
{
	overflow: hidden;
margin: 2px 0;
	position: relative;
	list-style: none;
    font-size: 0;
display: table;
    width: 100%;
}

.main_menu li
{
	   display: table-cell;
	background: #2e2e2e;
	font-size: 16px;
	color: #ffffff;
}

.main_menu li:last-child
{
	margin-right: 0;
}

.main_menu li a
{
	color: #ffffff;
	display: block;
	padding: 11px 21px;
}

.main_menu li:hover
{
	background: #df700d;
}