Вы добавили автоматические отступы, а блок остался на месте. Обычно он уже занимает всю доступную ширину, поэтому свободного места по бокам нет. Сначала ограничьте его размер:
.element {
max-width: fit-content;
margin-left: auto;
margin-right: auto;
}Значение
fit-content не даёт блоку стать шире содержимого. Затем автоматические отступы занимают свободное место слева и справа, и блок оказывается по центру.В гайде Josh W. Comeau этот приём показан с изменяемой шириной контейнера. Повторите опыт: сузьте контейнер и сравните
max-width: fit-content с фиксированной шириной width: 200px. В первом случае блок сможет сжаться, во втором может выйти за границы контейнера.