Background не применяется вокруг иконок, что я сделал не правильно?

Question

[Stanislav Suprovici]

Мне нужен такой результат :


Не понимаю почему Background не применяется вокруг иконок:


сам код:



Спасибо!

<section class="finish">
        <div class="container">
            <h2 class="finish_header">По окончании обучения Вы сможете!</h2>
            <div class="finish_divider"></div>
            
            <div class="finish_wrapper">
                <finish_item>
                    <div class="finish_round">
                        <img src="/icons/finish/1 (1).png" alt="" class="finish_icon">
                    </div>
                        <div class="finish_descr">Создать свой сайт или блог</div>
                </finish_item>
                <finish_item>
                    <div class="finish_round">
                        <img src="/icons/finish/2.png" alt="" class="finish_icon">
                    </div>
                        <div class="finish_descr">Создать свой сайт или блог</div>
                </finish_item>
                <finish_item>
                    <div class="finish_round">
                        <img src="/icons/finish/3.png" alt="" class="finish_icon">
                    </div>
                        <div class="finish_descr">Обеспечить ему медленный, но верный рост в ТОП</div>
                </finish_item>
                <finish_item>
                    <div class="finish_round">
                        <img src="/icons/finish/4.png" alt="" class="finish_icon">
                    </div>
                        <div class="finish_descr">Достигнуть стабильного прироста посетителей</div>
                </finish_item>
                <finish_item>
                    <div class="finish_round">
                        <img src="/icons/finish/5.png" alt="" class="finish_icon">
                    </div>
                        <div class="finish_descr">Достигнуть стабильного прироста посетителей</div>
                </finish_item>
            </div>
        </div>
    </section>

.finish .finish_wrapper  {
    margin-top: 41px;
    display: flex;
    justify-content: space-between;
}

.finish .finish_wrapper .finish_item {
    width: 204px;
}


.finish .finish_wrapper .finish_item .finish_round {
    width: 115px;
    height: 115px;
    background-color: #b4e2ff;
    border-radius: 8px;
}

.finish_descr {
    font-family: Roboto;
    font-size: 17px;
    line-height: 20px;
    font-weight: 300;
    color: #efefef;

Answer 1

[fuzzbunch]

Добрый день, всё просто.

У вас CSS селектор вида:
.finish .finish_wrapper .finish_item .finish_round

А должен быть:
.finish .finish_wrapper finish_item .finish_round
Т.е. без точки перед finish_item, так как это не класс, а элемент

Comments

[Stanislav Suprovici]

Большое спасибо!

[Ankhena]

А должен быть:
.finish .finish_wrapper finish_item .finish_round

Неа

Должен быть
.finish_round

stasN1, вам же будет проще, если вложенность будет ограничена двумя-тремя уровнями, а лучше вообще без неё.