Почему шрифт в figma выглядит меньше, чем в верстке?

Где видно, что у браузера 100% масштаб?
И еще вот это

Как расположить элементы внутри контейнера, чтобы они были одинаковы?

Только блоки не растягиваются

Как верстать сложные дизайны?

t800zippygod,

надо опять кучу времени тратить

Возможно, и что?

Можно бросить верстку совсем, можно не брать такие макеты.

Как сменить цвет гамбургера на белый, если ему задано свойство mix-blend-mode: difference?

Norum, https://learn.javascript.ru/coordinates#document-c... и далее по мере возникновения вопросов.

Умнее будет зайти с другой стороны.
Когда бургер не в этой зоне, то тогда добавлять класс у которого задан mix-blend-mode

Grid: как задать картинке высоту строки?

Идей умнее абсолюта в голову не пришло.

Как верстать сложные дизайны?

Например, есть дизайн с большим количеством геометрических фигур, все они расположены в рандомном порядке. Я бы сделал все фигуры через css и расположил их через абсолютное позиционирование.

Если они фоновые, то обычно достаточно bg size и bg position.
Смотрите, какие из фигур можно объединить в одну svg (или не svg), а какие независимые.

Но ад начинается даже при небольшом изменении размеров экрана: все «поедет» и придётся каждый блок подстраивать руками. Если есть хоть какие-то варианты ускорить процесс верстки подобных макетов, буду рад узнать их

Так не задавайте размеры в px.
Используйте %, vw, vh, calc
В каких-то макетах это полностью решит проблему, в других нужно будет дописывать media.

Если есть хоть какие-то варианты ускорить процесс верстки подобных макетов, буду рад узнать их

С опытом ускоритесь.

Как сменить цвет гамбургера на белый, если ему задано свойство mix-blend-mode: difference?

Убирать или переопределять или приводить к значению по умолчанию свойство mix-blend-mode, когда бургер в нужной секции.
На js.

Как затянуть шапку на всю ширину экрана?

Zorroti, Что там могло не получиться?
https://jsfiddle.net/1myab69d/

Как сделать адаптацию сайта?

Ярослав Опалинский, да, пожалуйста, вы можете задать, чтобы всегда было 2 столбца.
Или 2 столбца на десктопах и 1 на мобилках.
Или как-то еще как желает ваша душа.

Изучайте, изменяйте.

но изменился дизайн самого сайта

Я бы поостереглась применять тут слово дизайн.

Как сделать адаптацию сайта?

другой диагональю экранов

Диагональ тут не при чем.
Если вы свой монитор повернете на 90 градусов, размер диагонали останется, а вот изображение изменится.

Вам нужно почитать про адаптивную верстку. (На самом деле не только про нее)

- поставить соответствующий meta viewport
- использовать флексы и гриды
- могут пригодится относительные единицы измерения, такие как %, em, rem, vw, vh. vmin, vmax (это не значит, чт нельзя использовать px при адаптиве)
- использовать @media для перестроения блоков при разных размерах окна, ориентации устройства и т.д.

Это очень кратко. Тут можно написать небольшую брошюру, но всё это уже написано в различных статьях.

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

Это секция с фоном на всю ширину окна (наверное)
В ней форма с фикс или ограниченной шириной.
В форме блок в котором лежат 4 блока в каждом из которых label и его input. Выстраиваются эти 4 с помощью флекса или грида. С помощью order меняется порядок инпута и лейбла. Делать их в коде в разном порядке не запрещено, но плохо.
Ниже этого блока просто кнопка button submit.

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

Сверстайте как-нибудь и покажите на jsfiddle.net

Как сделать текст во всю ширину или блок?

Использовать единицы vw
Если известно какой текст.
Если нет, то гуглить плагины типа fit-text.

Как адаптивно сделать перекрытие изображений?

rusya88,

стили не наезжают, просто картинка не занимает всю ширину , как текст joxi.ru/brRNnB6cOGaKer

так задайте ей width 100%

Как адаптивно сделать перекрытие изображений?

При Изменении разрешения картинка переносится не адаптивно, т.е. не занимает всей ширины контейнера. Почему так?

Без вашего кода в песочнице типа jsfiddle.net сложно сказать почему.
Вероятно, вы неверно задали ей размеры.
Собственно и на скрине, та картинка, которая абсолютом, тоже не занимает всей ширины.
Так что ничего не ясно.

Здравствуйте пытаюсь в теге сделать но ничего не выходит в чём проблема?

Мощное средство для поиска "почему не работает" это валидатор https://validator.w3.org/nu/
Второе - инструменты разработчика в браузере.

А если использовать хороший редактор кода, то таких ошибок как у вас вообще не будет, потому что редактор их сразу подсветит.

Почему слетают стили при добавлении анимации в класс?

Не закрыта } анимации.
А у псевдоэлементов нет пробелов, надо так .circle:nth-child(2)::before, а не как у вас.
Нормальные редакторы это подсвечивают.

Как увеличить текст внутри кнопки-картинки (CSS)?

Иван Камбур, раз учитесь, тогда так:

0. Валидатор https://validator.w3.org/nu/

1. Картинки бывают контентные (смысловые) и украшения. Первые вставляются как тег img с атрибутом alt и вменяемым текстом в нем. Вторые - фоном и/или псевдоэлементами.

2. Специфичность селекторов Сколько весят селекторы?
important в своем коде это показатель плохого кода.

3. Кнопки или ссылки.
Действие - кнопка.
Переход на другую страницу или к якорю на текущей - ссылка.

4. Чтобы изменить стили дочерних элементов при наведении на родительский нужно использовать дочерние селекторы или контекстные селекторы.

5. Чем меньше вложенность селекторов, тем лучше.

Как лучше задавать изображение в background через HTML или CSS?

Если это части шаблона (дизайна), то в CSS.
Если это та часть, которую позволено редактировать клиенту, то зависит от происходящего: либо через атрибут style либо несколько классов для выбора клиентом.

Как добавить отступ между item?

Заменить
stroke-dasharray: 8 100;
на
stroke-dasharray: 7 100;
или сколько вы хотите отступ
и т.д.

Как выровнять элементы?

Devero97, чистота вашего кода помогает его воспринимать с экрана без песочницы. Сразу. А не разбирая по строчкам. Песочница помогает еще проще увидеть, что вы там натворили через инспектор.
Вы же, наверное, хотите быстрее получить ответ на свой вопрос.

А так, немешающий line-height это 1, а не 0.
Ставить флекс-элементам inline-block - бесполезно (хорошо только для старых браузеров, на случай когда нет флекса).
Ставить inline-block и не указывать vertical-align чревато кривулями.

Если вы собираетесь делать рейтинг на html/css, то вам нужны инпуты и т.д.
Если на js, то достаточно одного div и одного его псевдо и кастомного свойства.
Если на SVG, то всё вообще не так.
Варианты реализации легко ищутся на codepen.