Как решить вопрос с нумерацией без позиционирования?

Question

[olya_097]

Как решить вопрос с .work__number без позиционирования?
тоесть без

position: relative;
left: -64px;

https://jsfiddle.net/76bmgupz/

Answer 1

[Ankhena]

.work__number вообще лишний
https://jsfiddle.net/0Lxewqj1/

Почему без позиционирования?
С позиционированием можно и от work__subtitle избавиться.

Comments

[olya_097]

Ankhena, просто мне показалось что это костыльное решение

position: relative;
left: -64px;

[Ankhena]

olya_097, некостыльно это так: https://jsfiddle.net/tnj4sLq7/
а 100500 оберток и пустые дивы это отвратно.

[olya_097]

Ankhena, класс
спасибо огромное

[olya_097]

Ankhena, извините, что не создала отдельно

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

https://codepen.io/Olya097/pen/MWgXqQB

[Ankhena]

olya_097, так у вас по центру выравнивание стоит вдоль поперечной оси. Поменяйте на что нужно.

[olya_097]

Ankhena, спасибо

Answer 2

[S-a-n-d-r-0]

Внести такие правки:

.work__item
{
width: calc(100% / 4 - 100px);
margin-right: 100px;
padding-bottom: 125px;
}

.work__number{
position: relative;
margin-top: -25px;
}