olya_097, у вас не задано для нее вертикального выравнивания вообще.
Поэтому, плохо понятно куда вы пытаетесь её поставить и почему она туда не попадает.
Если вы взяли проект с prod сервера, то исходников там легко может и не быть.
Браузер показывает данные из sourcemap, но это не значит, что файлы существуют на этом сервере. Они могут лежать на сервере разработки или в репозитории. Ну или нигде.
Если связи с разработчиком нет и никаких данных о репозиториях тоже, то берите скомпилированный css и с ним и работайте. Переименуйте в расширение вашего препроцессора, если нужно.
Другой вариант воссоздать структуру и содержимое по sourcemap.
Обидно, но что делать.
tkachenkoaanna097, Очевидно же, что желтое, это 100px минус высота синего.
Вы написали, что красный блок должен быть высотой 100vh минус 100px.
Высота синего не задана, текста в нем мало, занимает он одну строку.
Значит, внизу остается место.
У вас почти во всех вопросах проблемы не с версткой, а с геометрией или внимательностью.
BavarianBeer, видимо, макет древний или у дизайнера шрифт был установлен с таким названием.
Можно было не мучиться, а просто заглянуть хотя бы в википедию или просто погуглить. Там было бы написано тоже самое, что я написала в первом комментарии.
BavarianBeer,
1. Ставите расширение для браузера PixelPerfect, добавляете в него свой макет.
2. Свои проблемные блоки обводите рамочками с помощью outline (не border, т.к. бордер занимает ширину)
3. Сравниваете
Вы показали только часть макета, поэтому сложно сказать где и в чем именно вы ошиблись. Я написала наиболее очевидные вещи.
Argentinium,
1. Когда учишься - однозначно не странно
2. На ширине макета сайт должен совпадать с макетом с какой-то небольшой погрешностью, по горизонтали с очень небольшой (разница за счет рендеринга шрифта).
В примере ширина контентного поля 1280. При такой ширине ошибка в 50px вряд ли может попадать в допустимые погрешности.
1. Во-первых, в песочнице шрифт не совпадает с макетом.
Вместо Arial MT пишите просто Arial.
Во-вторых, вы сами задаете левый margin для li в 50px. Уберете - расстояние между блоками будет меньше.
В-третьих, вы забыли убрать отступ по умолчанию у li.
Зачем вы вообще задаете ширину header_text_header?
Да и остальным тоже.
Эта ширина в макете определена автоматом по тексту. Если на живом сайте текст будет другой, а он будет другой, вы получите уродство, если продолжите так фиксировать размеры блоков.
Оперируйте отступами. Так, чтобы блоки не слипались между собой и не прилипали к краю окна.
Высоту в верстке вообще старайтесь не задавать, если без этого можно обойтись. При необходимости ограничивайте минимальный и/или максимальной.
Вы можете:
1. Кнопки оставить как есть, точки сделать абсолютом (это проще, чем наоборот)
2. Можете использовать флекс или грид и и задать областям с кнопками одинаковую ширину.
Например, https://jsfiddle.net/wftp2kom/
При этом, если какой-то из кнопок не будет, ничего не изменится.
asyasb, Есть спецификация HTML, в соответствии с которой имеет смысл верстать. Если читать её лениво, то для проверки есть валидаторы. https://validator.w3.org/nu/
Поэтому, плохо понятно куда вы пытаетесь её поставить и почему она туда не попадает.