.block3_header {
display: flex;
align-items: center;
justify-content: center;
margin-top: 87px;
}
.block3_header span {
font-family: 'Gilroy-Bold';
font-size: 34px;
line-height: 42px;
text-align: center;
color: #070707;
}
.block3_subText {
display: flex;
align-items: center;
justify-content: center;
margin-top: 55px;
}
.block3_subText span {
font-family: 'Gilroy-Medium';
font-size: 18px;
line-height: 22px;
text-align: center;
color: #070707;
}
.container_skills {
margin-top: 80px;
}
.block3_skills {
display: flex;
align-content: flex-end;
justify-content: space-evenly;
align-items: flex-start;
}
.block3_skill {
display: flex;
flex-direction: column;
align-items: center;
}
.block3_stars {
display: flex;
}
.block3_stars img {
margin-right: 9px;
}
.block3_stars:last-child {
margin-right: 0;
}
.block3_subTitle {
display: flex;
margin-top: 24px;
margin-bottom: 42px;
}
.block3_subTitle span {
font-family: 'Gilroy-Bold';
font-size: 14px;
line-height: 17px;
text-align: center;
color: #828282;
}
<div class="container container_skills">
<div class="block3_skills">
<div class="block3_skill">
<div class="block3_logo">
<img src="/img/PS.svg" alt="Photoshop">
</div>
<div class="block3_subTitle">
<span>
Adobe<br>Photoshop
</span>
</div>
<div class="block3_stars">
<img src="/img/Star.svg" alt="">
<img src="/img/Star.svg" alt="">
<img src="/img/Star.svg" alt="">
<img src="/img/Star.svg" alt="">
<img src="/img/StarWithoutFill.svg" alt="">
</div>
</div>
<div class="block3_skill">
<div class="block3_logo">
<img src="/img/AI.svg" alt="Adobe Illustrator">
</div>
<div class="block3_subTitle">
<span>
Adobe<br>Illustrator
</span>
</div>
<div class="block3_stars">
<img src="/img/Star.svg" alt="">
<img src="/img/Star.svg" alt="">
<img src="/img/Star.svg" alt="">
<img src="/img/StarWithoutFill.svg" alt="">
<img src="/img/StarWithoutFill.svg" alt="">
</div>
</div>
<div class="block3_skill">
<div class="block3_logo">
<img src="/img/AE.svg" alt="Adobe After Effects">
</div>
<div class="block3_subTitle">
<span>
Adobe<br>After Effects
</span>
</div>
<div class="block3_stars">
<img src="/img/Star.svg" alt="">
<img src="/img/Star.svg" alt="">
<img src="/img/Star.svg" alt="">
<img src="/img/Star.svg" alt="">
<img src="/img/StarWithoutFill.svg" alt="">
</div>
</div>
<div class="block3_skill">
<div class="block3_logo">
<img src="/img/Figma.svg" alt="Figma">
</div>
<div class="block3_subTitle">
<span>
Figma<br><br>
</span>
</div>
<div class="block3_stars">
<img src="/img/Star.svg" alt="">
<img src="/img/Star.svg" alt="">
<img src="/img/Star.svg" alt="">
<img src="/img/Star.svg" alt="">
<img src="/img/StarWithoutFill.svg" alt="">
</div>
</div>
</div>
</div>
Проблема заключается в то, что по макету карточки с программами находятся ближе друг к другу, чем по факту у меня получились. Есть вариант во флексах как-то уменьшить отступ между блоками?
.block3_skills
задатьjustify-content: center;
(вместоspace-evenly
как у Вас сейчас). А расстояние между внутренними блоками уже регулировать с помощьюmargin
margin
для корректировки отступов,gap
справится лучше, отступы будут только междуflex
элементами, у крайних элементов внешних отступов не будет.