display: flex; урок 1.19, практика
Добрый день. Возникла проблема с выравниванием иконок в одну линию. Названия свои, но в остальном точно следовала действиям в видео.
Скрин того, что получилось:
https://pastenow.ru/7dd0b5aaa17f6e0b672058a85ad6797a
Код html:
<div class="result_wrapper">
<div class="result_item">
<div class="result_ellipse">
<img src="icons/iconcomputer.png" alt="computer" class="result_img">
</div>
<div class="result_deskr">Создать свой сайт или блог</div>
</div>
</div>
<div class="result_wrapper">
<div class="result_item">
<div class="result_ellipse">
<img src="icons/icondask.png" alt="desk" class="result_img">
</div>
<div class="result_deskr">Правильно его оптимизировать</div>
</div>
</div>
<div class="result_wrapper">
<div class="result_item">
<div class="result_ellipse">
<img src="icons/icongraphic.png" alt="graphik" class="result_img">
</div>
<div class="result_deskr">Обеспечить ему медленный, но верный рост в ТОП</div>
</div>
</div>
<div class="result_wrapper">
<div class="result_item">
<div class="result_ellipse">
<img src="icons/iconpeoples.png" alt="peoples" class="result_img">
</div>
<div class="result_deskr">Достигнуть стабильного прироста посетителей</div>
</div>
</div>
<div class="result_wrapper">
<div class="result_item">
<div class="result_ellipse">
<img src="icons/iconcards.png" alt="cards" class="result_img">
</div>
<div class="result_deskr">Получать ощутимую прибыль</div>
</div>
</div>
Код CSS:
.result {
min-height: 447px;
padding: 86px 0 79px 0;
background: url(../icons/2-layers.png) center center/cover no-repeat;
}
.result .result_wrapper {
margin-top: 41px;
display: flex;
justify-content: space-between;
}
.result .result_wrapper .result_item {
width: 204px;
}