html, странное поведение блока при адаптиве при использовании отрицательных margin
Не могу никак решить проблему, использовал отрицательные margin для flex контейнера и padding для flex элементов чтобы сделать расстояние между ними, но при уменьшении окна просмотра появляется горизонтальное окно прокрутки и блок содержащий колонки становится меньше чем его содержимое
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>
</head>
<body>
<main class="main">
<div class="services">
<div class="services__container container">
<div class="services__header decor-title">
<div class="decor-title__title title">
<div class="title__item">Популярные</div>
<h2 class="title__main title__main_w">Лоты на аукцион</h2>
</div>
<div class="decor-title__decor decor-block">
<div class="decor-block__decor">
<span></span>
</div>
<div class="decor-block__icon">
</div>
<div class="decor-block__decor decor-block__decor_r">
<span></span>
</div>
</div>
</div>
<div class="services__body">
<div class="services__row">
<div class="services__column">
<div class="services__item item-services">
<div class="item-services__icon">
<img src="img/human.jpg" alt="">
</div>
<div class="item-services__title">Экспертная оценка</div>
<div class="item-services__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla?</div>
<a href="#" class="item-services__link"><span>Подробнее</span></a>
</div>
</div>
<div class="services__column">
<div class="services__item item-services">
<div class="item-services__icon">
<img src="img/human.jpg" alt="">
</div>
<div class="item-services__title">Экспертная оценка</div>
<div class="item-services__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla?</div>
<a href="#" class="item-services__link"><span>Подробнее</span></a>
</div>
</div>
<div class="services__column">
<div class="services__item item-services">
<div class="item-services__icon">
<img src="img/human.jpg" alt="">
</div>
<div class="item-services__title">Экспертная оценка</div>
<div class="item-services__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum!Lorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla?</div>
<a href="#" class="item-services__link"><span>Подробнее</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
SCSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 970px;
margin: 0 auto;
padding: 0 10px;
}
html {
}
.services {
padding: 40px 0 60px;
background-color: #1c242a;
&__container {}
&__header {
margin: 0 0 40px 0;
}
&__body {}
&__row {
display: flex;
flex-wrap: wrap;
margin: 0 -50px;
}
&__column {
padding: 0 50px;
flex: 0 1 33.333%;
margin: 0 0 40px;
}
@media(max-width: 980px) {
&__column {
flex: 0 1 50%;
}
}
@media(max-width: 650px) {
&__column {
flex: 0 1 100%;
}
}
&__item {
}
}
.item-services {
height: 100%;
display: flex;
flex-direction: column;
text-align: center;
color: #fff;
&__icon {
margin: 0 0 10px 0;
display: flex;
align-items: center;
justify-content: center;
img {
height: 165px;
width: 165px;
max-width: 100%;
}
}
&__title {
margin: 0 0 15px 0;
font-size: 1.25rem;
text-transform: uppercase;
}
&__text {
color: goldenrod;
text-align: center;
flex: 1 1 auto;
margin: 0 0 20px 0;
}
&__link {
color: #fff;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.0625em;
position: relative;
span {
padding: 0 10px 0;
position: relative;
z-index: 2;
background: #1c242a;
}
&::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background-color: goldenrod;
}
}
}
Источник: Stack Overflow на русском