Заголовок выходит за границы блока

Question

Добавил заголовок h3, приписал ему padding-top,а он отталкивается от границы блока, хотя в html я его прописал внутри. Что я сделал не так?

* {
    margin: 0;
    padding: 0;
}

.top {
    width: 1920px;
    height: 790px;
    background: #F4F4F4;

    .header {
        position: absolute;
        width: 1180px;
        height: 80px;
        left: 370px;
        top: 20px;
        background: #E73D66;
        border-radius: 90px;
        display: flex;
        list-style-type: none;
    }

    .logo {
        padding-top: 18px;
        padding-bottom: 18px;
        padding-left: 40px;
    }

    .logo-2 {
        padding-top: 23px;
        padding-bottom: 24px;
        padding-left: 15px;
    }

    .pages {
        padding-left: 40px;
        padding-top: 30px;
        padding-bottom: 30px;
        height: 20px;
        font-family: 'rubik';
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        text-transform: uppercase;
        color: #FFFFFF
    }

    .pages:nth-child(3) {
        padding-left: 141px;
    }

    .media {
        padding-left: 30px;
        padding-top: 28px;
    }

    .media:nth-child(7) {
        padding-left: 174px;
    }

    .media:last-child {
        padding-right: 40px;
    }

    .bg-dogs {
        padding-top: 359px;
        padding-left: 250px;
    }

    .top-promo {
        margin-top: 183px;
    }
}

<body>
<div class="top">
    <ul class="header">
        <li><img class="logo" src="img/logo-dogs.svg" alt="logo"></li>
        <li><img class="logo-2" src="img/logo4.svg" alt=""></li>
        <li class="pages">О приюте</li>
        <li class="pages">Питомцы</li>
        <li class="pages">Полезные советы</li>
        <li class="pages">Контакты</li>
        <li class="media"><img src="img/Instagram.svg" alt="instagram"></li>
        <li class="media"><img src="img/vk.svg" alt="vk"></li>
        <li class="media"><img src="img/telegram.svg" alt="telegram"></li>
    </ul>
    <img class="bg-dogs" src="img/bg-dogs.png" alt="">
    <h3 class="top-promo">Приют для собак <span style="color: #E73D66;">четыре лапы</span></h3>

</div>

Answer 1

Вы не должны размещать изображение при помощи padding, для этого есть абсолютное позиционирование попробуйте что-то вроде:

.top {
    position: relative;
}
.bg-dogs {
    position: absolute;
    right: 0;
    bottom: 0;
}

БЛОГ НА HUSL

Заголовок выходит за границы блока

Ответы (1 шт):