JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu-primary-navigation-container">
  <ul id="menu-primary-navigation" class="nav navbar-nav">
    <li><a href="/"><i class="fa fa-home"></i> Главная</a></li>
    <li><a href="/vypadenie/">Выпадение волос</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>
  </ul>
</div>

CSS

*::after, *::before {
box-sizing: border-box;
}

.navbar-nav {
  text-align: justify;
}

.navbar-nav:after {
  content: "";
  text-align: center;
  display: inline-block;
  vertical-align: top;
  width: 100%;
}

.navbar-nav li {
	display: inline-block;
  vertical-align: top;
  list-style: none;
}

.menu-primary-navigation-container {
  width: 1150px;
  height: 30px;
  background: #146c74;
}

.menu-primary-navigation-container li a {
    display: block;
    font-family: "Roboto",Tahoma,Geneva,sans-serif;
    font-size: 0.9em;
    padding: 0 18px;
    text-decoration: none;
    color: #fff;
    height: 30px;
    line-height: 30px;
}