JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <ul class="menu">
        <li class="parent"><a href="#">О Фонде</a> </li>
        <li class="parent"><a href="#">Дети</a> </li>
        <li class="parent"><a href="#">Проекты</a> </li>
        <li class="parent"><a href="#">Новости</a> </li>
        <li class="parent"><a href="#">Как помочь</a> </li>
        <li class="parent"><a href="#">Вам нужна помощь?</a> </li>
        <li class="parent"><a href="#">Специалистам</a> </li>
        <li class="parent"><a href="#">Волонтерство</a> </li>
    </ul>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    width: 960px;
    margin: 0 auto;
    background: green;
}

div {
    width: 100%;
    height: 200px;
    background: orange;
}

ul {
    display: table;
    width: 100%;
    list-style: none;
    border-color: white;
}

ul > li {
    display: table-cell;
    padding: 1%;
    text-align: center;
    background: red;
    border-right: 1px solid white;
}

ul > li:last-child {
    border: 0;
}

JavaScript

var container = $('div.container');
var elements = $('ul.menu > li');

var borderSize = Math.ceil( container.width() / elements.length / 100);

elements.css('borderRightWidth', borderSize + 'px');