fapchat, мне кажется, троллите нас всех как раз именно вы, задавая подобный вопрос и не предоставляя ни строчки кода. Мол, гадайте, что откуда и зачем среди миллиона вариантов.
Всё строится по сетке (сетке Bootstrap, если быть совсем точным, 12 колонок, каждая имеет внутренний отступ по 15px слева и справа):
P. S. Даже ширина контентной области имеет типичные «правильные» 1170px (Bootstrap, короче), что учитывает типичные ноутбуки с лихвой + отступы по бокам в 15px на старых экранах 1200px (без учета скролла, конечно).
Тимур Турсунбаев, макет так не делают. Его не нужно масштабировать. Макет должен быть не абстрактным, а точным, т. е. 1:1.
Мы же не знаем, какое масштабировние будет у пользователя, мы не ориентируемся на физическое разрешение как таковое. Мы можем только ориентироваться на размер viewport, который в px и размерах, которые нам нужны.
У меня на MacBook Pro 15 (2017) разрешение viewport ~1900 px при стандартном масштабе экрана.
Я уже начал искать информацию о том, как анимируется display под капотом. Мол, оно анимируется, просто без промежуточных шагов, т. е. визуально нельзя отследить. Просто тут диссонанс в понимании, ибо тогда хотя бы работали transition-delay и transition-duration, но они тоже не работают. Там все всегда мгновенно и без задержек.
Для нормального анимирования visibility придется использовать opacity совместно с ним:
Ну, главное, чтобы он в приличном обществе такую ерунду не сказал.