Почему текст некорректно переносится из макета?

Question

[What have you done]

Код-css-html

Как должно быть:

Comments

[Danny Arty]

Если вы о размерах блока, то как минимум у вас неправильный normilize.css. В нем есть запись вида

* {
margin: 0;
}

Что в принципе является варварским решением, ибо обнуляет маргины тем элементам, у которых они быть должны. Например у заголовка h5 в вашем .healthcare__item. Судя по макету отступ есть, а в верстке его нет

[Alfieros]

Danny Arty, с чего вы взяли, что обнуление это варварский способ? Я считаю подключение normalize головной болью для больших проектов. Это устаревший стиль и пора всех дизайнеров дрючить, чтобы они изначально прорабатывали эти моменты в виде параграфов и заголовков!

[Ankhena]

Alfieros,

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

Потому что потом придется снова переопределять для тех элементов, которым эти отступы нужны.
Поэтому разумнее обнулять только тем, кому действительно нужен 0, например, body.

[Ankhena]

Kanm имеет смысл уточнить, что именно по вашему мнению работает некорректно.

Потому что в коде некорректного довольно много.

[What have you done]

Danny Arty, у меня некорректно переносится тест на след строку , размер блока для текста соответствует размеру из макета

[What have you done]

Ankhena, у меня некорректно переносится тест на след строку.Могу узнать что некорректного вы увидели? Если вы о padding для colum то он нужен для декора , в коде есть остаточный мусор моих попыток добиться результата для правильного переноса как из макета.

[Danny Arty]

What have you done, если именно этот блок, то судя по размеру текста он переносится верно. Именно для данного варианта можете использовать неразрывный дефис, т.е в коде вместо COVID-19, напишите COVID‑19

[Ankhena]

What have you done,

размер блока для текста соответствует размеру из макета

Ну да, в макете 242, в песочнице 278, действительно, очень близкие значения.

В любом случае, текст по-разному рендерится в графических программах и в разных браузерах.
Если переносы текста нужны прям точно как по макету, используйте br и неразрывные пробелы, там где они уместны.

Могу узнать что некорректного вы увидели?

1. healthcare__colum с виду лишняя обертка, зачем она?
2. Иконки не являются контентными изображениями, их вставляют фонами и/или псевдоэлементами.
3. Странные переопределения box-sizing и зачем-то два раза стили для контейнеров.
4. Неровные значения паддингов. Зачем?
5. line-height: calc(12 / 10 * 100%); вы можете один раз посчитать на калькуляторе, а не заставлять браузер пересчитывать при каждой загрузке страницы.
line-height удобнее задавать безразмерным коэффициентом.
https://learn.javascript.ru/font-size-line-height
css-live.ru/css/metriki-shrifta-line-height-vertic...
6. В font-family забыто семейство. Если шрифт пропадет, вы в одном браузере получите шрифт без засечек, а в другом с засечками.
7. Семантика

и т.д.

[What have you done]

Ankhena, 0.Тут я не то загрузил,более старое отправил.
1. Можно было сделать по другому с justify-content и уменишить flex для colum , но я решил сделать ячейки colum на всю длину.Colum служит оберткой как страховка, так же конкретно здесь для декора и как ограничевающий container для блока контента .helthare__item. helthare__item обертка уже для самого контента.
2.Если честно не знал даже это , спасибо.
3.Не совсем понял , вы хотите сказать что я задаю классам с __container стили ?
4.В макете почти все неровное , оставить все надо как есть.
5.Не заметил , черновуха пока что.
7. Есть косяки , но они небольшие ведь.Читаемо найти то что нужно или так только мне кажется ?

[Ankhena]

What have you done, к 4: ничего подобного, совсем не следует тащить ошибки/недочеты дизайнера в верстку.
Пиксель перфект всё равно никто не делает даже до целого пикселя, а вы там какие-то сотые пишете. 2-5-10px вообще нормальные расхождения, если на глаз всё выглядит гармоничным.
Тем более, что про рендер шрифтов я уже сказала.

[What have you done]

Ankhena, Спасибо за помощь

[What have you done]

Danny Arty, Помогло , спасибо