Задать вопрос
@SQLpodavan228

Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?

Проблема только с третьей колонкой, где текст, ломается ширина и высота, всё задано и всё равно ломается, уже часа 3 сижу, менял блоки, переставлял и все равно та же самая проблема, такое чувство, что проблема легкая и совершенно мелочная, но вот вообще ничего не лезит в голову, в чем может быть проблема. скину на всякий случай весь код и скрины, и сам макет с фигмы:



6740978d63939824496853.jpeg
674097964f606597077786.jpeg



<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style/css.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
        rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Righteous&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap"
        rel="stylesheet">
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Righteous&display=swap"
        rel="stylesheet">
</head>

<body>

    <main class="main">
        <div class="main__wrapper">
            <section class="benefits__cards">
                <div class="benefits__card">
                    <div class="card__name">
                        <span class="number__card">01</span> Best Coffee Flavour
                    </div>
                    <div class="card__img">
                        <img class="img__card" src="./style/img/best cofee flavour.png" alt="">
                    </div>
                </div>

                <div class="benefits__card">
                    <div class="card__name">
                        <span class="number__card">02</span> Place to get lost
                    </div>
                    <div class="card__img">
                        <img class="img__card" src="./style/img/place to get lost.png" alt="">
                    </div>
                </div>

                <div class="benefits__card">
                    <div class="card__name">
                        <span class="number__card">03</span> Proper roesting
                    </div>
                    <div class="card__img">
                        <img src="./style/img/proper roesting.png" alt="" class="img__card">
                    </div>
                </div>
            </section>

            <section class="our-history">
                    <div class="our-history__parts">
    
                        <div class="part__left">
                            <div class="part-left__wrapper">
                                <div class="left__first-img">
                                    <img src="./style/img/place to get lost.png" alt="" class="first__img">
                                </div>
        
                                <div class="left__second-img">
                                    <img src="./style/img/best cofee flavour.png" alt="" class="second__img">
                                </div>
                            </div>
                        </div>
    
                        <div class="part__middle">
                            <div class="part-middle__wrapper">
                                <div class="middle__img">
                                    <img src="./style/img/two coffee.png" alt="" class="two-cofee__img">
                                </div>
                            </div>
                        </div>
    
                        <div class="part__right">
                            <div class="part-right__wrapper">
                                <div class="part-right__main">
                                    <div class="right-name__wrapper">
                                        <div class="part__right-name">
                                            Our History
                                        </div>
                                    </div>
                                    <div class="right-head__wrapper">
                                        <div class="right__head">
                                            Create a new story with us
                                        </div>
                                    </div>
                                    <div class="right-text__wrapper">
                                        <div class="right__text">
                                            mauris rhoncus in imperdiet placerat. vestibu emismd nisl
                                            suscirpit ligula volutpat, a feyguat urn maxmaus. cars massa
                                            nibhtincidunt. donec et nibh maximus, est eu, mattis nuce.
                                            preasent ut quam quis quam venen
                                            atis fringilla. morbi vastibulum id tells mmodo mattis.
                                            aliauam erat volutpal.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </section>
        </div>
    </main>


</body>

</html>


.main__wrapper {
    max-width: 1174px;
    /* margin: 140px 165px 140px 165px; */
    margin: 0 auto;
}
.benefits__cards {
    margin-top: 140px;
    display: flex;
    gap: 36px;
    justify-content: space-between
}
.img__card {
    max-width: 366px;
    min-height: 100%;
}
.number__card {
    color: #C99E71;
}
.card__name {
    font-family: "Righteous", sans-serif;
    font-size: 24px;
    line-height: 29.8px;
    font-weight: 400;
    margin-bottom: 14px;
}

/* our-history section */

.our-history {
    margin-top: 140px;
}
.our-history__parts {
    display: flex;
    gap: 32px;
}
.part-left__wrapper {
    max-width: 298px;
    min-height: 635px;
}
.part-middle__wrapper {
    max-width: 600px;
    min-height: 635px;
}
.part-right__wrapper {
    min-width: 550px;
    min-height: 635px;
}
.left__second-img {
    margin-top: 31px;
}
.first__img, .second__img {
    max-width: 298px;
    max-height: 302px;
}

.part__right-name {
    font-weight: 600;
    font-size: 18px;
    line-height: 21.6px;
    font-family: "Urbanist", sans-serif;
    color: #C99E71;
}
.right__head {
    margin-top: 12px;
    font-weight: 400;
    font-size: 48px;
    line-height: 62.4px;
    font-family: "Righteous", sans-serif;
}
.right__text {
    font-weight: 500;
    font-size: 16px;
    line-height: 28.8px;
    font-family: "Urbanist", sans-serif;
    margin-top: 36px;
    opacity: 80%;
}
.right-name__wrapper {
    max-width: 92px;
    min-height: 22px;
}
.right-head__wrapper {
    max-width: 398px;
    min-height: 124px;
}
.right-text__wrapper {
    max-width: 398px;
    min-height: 174px;
}

.part__right {
    background-color: #1C1814;
}
  • Вопрос задан
  • 71 просмотр
Подписаться 1 Простой 6 комментариев
Пригласить эксперта
Ответы на вопрос 1
@Palwanchik
Пиши:
z-index: -1;
position: absolute;

над padding и margin
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы