Почему `text-align: center` в flex сломал макет после изменения размера вниз и вверх?

Question

У меня проблема с text-align: center и flex.

Вот пример Я отделился от своего текущего проекта, чтобы разобраться с этой проблемой:

Хотя он широкий >940px window width выглядит хорошо, а после падения ниже 940px меняется на другой макет - проблем пока нет.

Проблема в том, что после увеличения размера он остается сломанным ; _;

Я не понимаю, почему так себя ведет.

1. Выглядит красиво,

2. После определения размеров (используя другой макет)

3. Но это не возвращается к 1) шагу после изменения размера

Ход выполнения:

• Я обнаружил в ходе тестирования, что отключение и включение text-align: center заставляют его снова выглядеть нормально (используя DevTools). Может быть, это какая-то ошибка рендеринга и повторное добавление стиля позиционирования (как text-align), заставляющее перерисовывать всю часть?
• Я пытался использовать display: none, когда это <940px, но это не помогает. Я не думаю, что это связано с другим макетом (один используется <940px.

Answer 1

Я изменил это и в контрольных точках, и это не сломалось, как раньше. Вы имеете в виду это поведение?

display: flex;
justify-content: space-between;
align-items:center;
flex-direction: row;