Есть следующий код:
.do__list {
display: flex;
justify-content: center;
color: #103988;
}
.do__item:not(:last-child) {
margin-right: 46px;
}
.do__item {
background: #CCCCCC;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
padding: 25px;
padding-bottom: 38px;
width: 330px;
height: 100%;
}
.do__block {
text-align: center;
}
.do__item-description {
width: 50%;
}
<ul class="do__list">
<li class="do__item">
<div class="do__block">
<img class="do__img" src="img/delivery.png">
<h2 class="do__item-description">Дорожная транспортировка</h2>
</div>
</li>
<li class="do__item">
<div class="do__block">
<img class="do__img" src="img/cargo-ship.png">
<h2 class="do__item-description">Морская транспортировка</h2>
</div>
</li>
<li class="do__item">
<div class="do__block">
<img class="do__img" src="img/railroad.png">
<h2 class="do__item-description">ЖД транспортировка</h2>
</div>
</li>
<li class="do__item">
<div class="do__block">
<img class="do__img" src="img/airplane.png">
<h2 class="do__item-description">Воздушная транспортировка</h2>
</div>
</li>
</ul>
Мне нужно что бы текст разделялся на 2 строки в каждом блоке:
Но у меня это выглядит вот так:
HTML CSS занимаюсь недавно, подскажите как исправить.