Что тут нужно сделать?

Question

[BavarianBeer]

Первая боль:https://imgur.com/a/n1hYPDa в макете указано что 253 расстояние. У меня выходит на 50 пикселей больше и я клянусь что все облазил с ног и поперек, несколько раз. Все равно выходит столько.
Вторая головная боль: https://imgur.com/a/mcDKWBJ Не понятно как конкретно тут флексами пользоваться. Делаю через немарк.список(что из кода понятно я думаю.)
https://codepen.io/uoi99/pen/wvWwJOq
Пожалуйста.

Comments

[Ankhena]

1. Во-первых, в песочнице шрифт не совпадает с макетом.
Вместо Arial MT пишите просто Arial.
Во-вторых, вы сами задаете левый margin для li в 50px. Уберете - расстояние между блоками будет меньше.
В-третьих, вы забыли убрать отступ по умолчанию у li.

Зачем вы вообще задаете ширину header_text_header?
Да и остальным тоже.
Эта ширина в макете определена автоматом по тексту. Если на живом сайте текст будет другой, а он будет другой, вы получите уродство, если продолжите так фиксировать размеры блоков.
Оперируйте отступами. Так, чтобы блоки не слипались между собой и не прилипали к краю окна.

Высоту в верстке вообще старайтесь не задавать, если без этого можно обойтись. При необходимости ограничивайте минимальный и/или максимальной.

2. Про флексы не очень понятно в чем вопрос.

Так и пишете display:flex; flex-wrap: wrap и т.д.

[Марк]

насчёт расстояния - это так принципиально? не все же будут лазать у тебя на сайте в эти свойства

[Ankhena]

насчёт расстояния - это так принципиально?

Действительно, подумаешь, не совпадает сайт с макетом, кому какая разница,дизайнер ведь просто так рисовал.

[Марк]

Ankhena, ну тогда сори, я просто поинтересовался

[Argentinium]

Ankhena, не странно ли сейчас в 2020 считать пиксели, когда экранов 100500 размеров?

[Ankhena]

Argentinium,
1. Когда учишься - однозначно не странно
2. На ширине макета сайт должен совпадать с макетом с какой-то небольшой погрешностью, по горизонтали с очень небольшой (разница за счет рендеринга шрифта).
В примере ширина контентного поля 1280. При такой ширине ошибка в 50px вряд ли может попадать в допустимые погрешности.

[BavarianBeer]

Ankhena, спасибо, я понял. Но все же где моя ошибка была что он 290 пикселей вместо 250 показывает? Помогите пожалуйста, я очень хочу разобраться

[Ankhena]

BavarianBeer,
1. Ставите расширение для браузера PixelPerfect, добавляете в него свой макет.
2. Свои проблемные блоки обводите рамочками с помощью outline (не border, т.к. бордер занимает ширину)
3. Сравниваете

Вы показали только часть макета, поэтому сложно сказать где и в чем именно вы ошиблись. Я написала наиболее очевидные вещи.

[BavarianBeer]

Ankhena, Здравствуйте, извините что поздно отвечаю, но все оказалось из за того что шрифт не тот, хотя я написал как в макете(arial mt). почему там мт? что это значит? я из за этого шрифта пол дня вчерашнего мучался

[Ankhena]

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

Answer 1

[glhit]

1. У тебя в макете используется другой шрифт + list-style: none добавь для ul, задай падинги, увеличь расстояние между буквами и все будет ок.
2. Элементарно, создается два блока, в одном блоке

<div style="display:flex">
<div style="width:50%">Левая колонка</div>
<div style="width:50%">Правая колонка</div>
</div>

Или можешь вместо width задать относ ед flexbox