Why are menu items not being distributed with text-align: justify?

Question

css

Good day.
Tell me plz, why could the menu items be evenly distributed across the width?
I set the distribution using text-align: justify and a pseudo-element.
Everything is ok in the layout, but after connecting to ModX, all the items began to align to the left.
Styles are connected normally, the structure is also respected.
Here is the site.
Here is a link to the screen.

Answer 1

если используешь text-align: justify; для inline-block элементов, то ты должен помнить что каждый элемент становится словом. и чтобы он их раскидал по строке - между твоими li должен стоять либо пробел, либо перенос строки. в самом html.
кароч у тебя они идут так

<ul class="menu__list"><li class="menu__item"><a href="index.php?id=7" class="menu__link">Акции</a></li><li class="menu__item"><a href="#salons" class="menu__link">Салоны</a></li><li class="menu__item"><a href="#service" class="menu__link">Услуги</a></li><li class="menu__item"><a href="http://orange.proshift.ru/" class="menu__link logo"><img src="assets/img/logo.svg" alt="logo"></a></li><li class="menu__item"><a href="index.php?id=5" class="menu__link">Мастера</a></li><li class="menu__item"><a href="index.php?id=6" class="menu__link">Новости</a></li><li class="menu__item"><a class="menu__link" href="#">
            </a><div class="btn-link__wrap"><a class="menu__link" href="#"></a><a class="btn-link" href="">Записаться</a></div></li></ul>

а надо так

<ul class="menu__list">
    <li class="menu__item"><a href="index.php?id=7" class="menu__link">Акции</a></li>
    <li class="menu__item"><a href="#salons" class="menu__link">Салоны</a></li>
    <li class="menu__item"><a href="#service" class="menu__link">Услуги</a></li>
    <li class="menu__item"><a href="http://orange.proshift.ru/" class="menu__link logo"><img src="assets/img/logo.svg" alt="logo"></a></li>
    <li class="menu__item"><a href="index.php?id=5" class="menu__link">Мастера</a></li>
    <li class="menu__item"><a href="index.php?id=6" class="menu__link">Новости</a></li>
    <li class="menu__item"><a class="menu__link" href="#"></a><div class="btn-link__wrap"><a class="menu__link" href="#"></a><a class="btn-link" href="">Записаться</a></div></li>
</ul>

если по простому, то он твои li воспринимает как одно длинное слово. одно слово.