Проблема только с третьей колонкой, где текст, ломается ширина и высота, всё задано и всё равно ломается, уже часа 3 сижу, менял блоки, переставлял и все равно та же самая проблема, такое чувство, что проблема легкая и совершенно мелочная, но вот вообще ничего не лезит в голову, в чем может быть проблема. скину на всякий случай весь код и скрины, и сам макет с фигмы:
<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;
}
