Как выравнять 2 блока по центру?

display:flex;
justify-content: center

Либо нужно поставить саму форму по центру. Хоть флексом родителя хоть обычными margin auto.

Но пока сложно точно сказать, потому что не ясно что именно у вас не получилось и где код и песочница на codepen.io

Как верстать такие блоки?

Обычные фоновые картинки.

Тексты на последнем скрине абсолютами или гридами.

Как реализовать чтобы подпункты открывались на одном уровне с главным пунктом меню?

Абсолюты позиционируются относительно ближайшего предка с position, отличным от static (чаще это relative).
По идее, этого знания должно хватить.

Как правильно сверстать информацию о пользователе в шапке сайта?

Muranx, если без картинки теряется смысл происходящего, то картинка делается контентной.

а это вы имели ввиду что пустому диву нельзя давать .div{ background: url("url.png"); такое свойство, т.е. нужно создавать псевдоэлемент для див блока, и уже ему давать свойство в виде урла картинки? Так?

Я имела в виду, что если можно обойтись без лишних тегов, то это прекрасно. Пустой div для того, чтобы вставить фоновую иконку не нужен. Он легко заменяется на псевдо от blockLink.

Как правильно сверстать информацию о пользователе в шапке сайта?

imko,

Ставить в одну ячейку то что я хочу наложить?

Да

Какие плюшки?

Нет абсолюта, нет нового слоя, всё в потоке

Как правильно сверстать информацию о пользователе в шапке сайта?

Muranx, img это контентные изображения, без которых потеряется часть смысла.
Убираем стили, смотрим, что осталось. Без картинок не понятно => контентные. Всё ок => украшения (псевдоэлемент, а не пустой div).
Откуда и как при этом пользователи что-то грузят без разницы. Если не умеете пользоваться кастомными свойствами css, то ок, путь img и aria-hidden к ним.

userInfo - от этой обертки можно избавиться, заменив флекс на грид.

как в будущем можно будет реализовать кастомные рамки для пользователей с различным статусом?

Просто фон для обертки картинки.
Ну или псевдо (только гридами, а не абсолютом, по возможности)

Как реализовать фильтр на js c чекбоксами?

idiumriobstenu, вы как-нибудь разметку к валидной приведите.
Какие ещё div вокруг tr? Где сам table? Ну и всё такое.
Атрибут внутри tr это вообще нечто.

В js лучше манипулировать классами, чем напрямую свойствами css, особенно если это касается display.

Как реализовать фильтр на js c чекбоксами?

Собственно это и без js решается, если нужно просто скрыть лишние.
Ставите инпут перед списком.
Сообщениям задаете data-атрибуты
Селектором по соседям скрываете или не скрываете лишние.

Font-dislay: swap. Как избежать смещение макета?

alexsun7, попробуйте, возможно, это поможет загрузить и отрисовать шрифт быстрее.

Как создать горизонтальную линию сквозь кнопку?

Псевдик для кнопки, шириной 100vw. Прибить налево к правому краю кнопки.
Направо сделать от него тень.
Вываливание по ширине налево не дает прокрутки. Тень тоже не дает прокрутки.
Не нужно будет делать уродский overflow.

Либо задать border для секции, если она на всю ширину окна.

Font-dislay: swap. Как избежать смещение макета?

Вы используете preload для шрифтов?

Почему псевдо элемент(.todo-item__span::after) появляется не по середине?

Антон Горецкий, да, псевдо ужатый в ноль будет по центру. Но при ховере нет. У меня в ответе подробно написано, почему.

Как правильней будет сверстать такой каталог?

Levott, и почему же вы тогда не отметили ответ решением? Ну и там лайк всякий? )))

Почему псевдо элемент(.todo-item__span::after) появляется не по середине?

Так не поможет, можете сами попробовать ;)

Почему мое видео вылезает за пределы доступного, появляется скролл и не работает текст?

Почему мое видео вылезает за пределы доступного

А где сказано, какого размера оно должно быть?

Для наложения блоков используйте гриды, абсолюты тут лишние.
Чтобы понять почему текст сейчас не поверх, загуглите "контекст наложения".

Как убрать лишний отступ в заголовке?

ssintro,

Я имею ввиду отступ от левого края, а не от верха или низа, то есть не высоту строки

Интересно, как мы должны были догадаться.

Речь о том, что буквы не вровень получаются?
Компенсируйте отрицательным отступом. Опять же можно в em или других шрифтовых единицах.

Как убрать лишний отступ в заголовке?

Это не padding, это line-height.
Только не надо его убирать. Попробуйте сделать заголовок в несколько строк и посмотрите что будет с маленьким line-height.

Позиционируйте не жестко, а относительно высоты строки.

Как правильней будет сверстать такой каталог?

Сергей delphinpro, ага

Как правильней будет сверстать такой каталог?

Если табличные данные верстать таблицами, то такой проблемы не будет.

Если всё же флексами, то придется задавать ширину ячейкам.

Если гридами, то ждать поддержки subgrid.

Либо помогать себе на js.

Как правильно расположить элементы через стили?

https://qna.habr.com/q/1088262