Почему при justify-content-center не учитываются margin?

Question

[Senseich]

Сегодня заметил такое поведение в flex-box и заинтересовался. Допустим есть такая структура:

<div class="container">
            <div class="row">
                <div class="col-lg-3">
                    <img src="img/logo.png" alt="Tinyone" class="logo animated fadeInUp">
                </div>
                <div class="col-lg-5 ml-auto">
                    <nav>
                        <ul class="menu d-flex justify-content-сenter animated fadeInDown">
                            <li class="menu__item"></li>
                            <li class="menu__item"></li>
                            <li class="menu__item"></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>

У каждого li есть margin слева и справа 57px.

Я заметил, что при justify-content-center он не учитываются, т.е. марджины выходят за пределы блока слева и справа:


А при justify-content-start , например, слева учитывается марджин:

Comments

[ⓒⓢⓢ]

выделенный блок на 1 и 2 скрине имеет одинаковую ширину в 445пкс, можно предположить, что его дочерние элементы (li) одинаковых размеров и отступов.
А смещение, куда указывает стрелка (ошибочно принятое за маргин?) - демонстрирует разницу выравнивания justify-content

[Екатерина]

Очень годная статья на тему: 11 вещей которые я узнал, читая спецификацию flexbox.