почему не учитываються паддинги container в секции?

первый раз с таким столкнулась что заданные паддинги на контейнер не видны при работе,т.е. они не работают. Что делать? песочница в комментах

это фактически что имею введите сюда описание изображения

.container {
  max-width: 340px;
  padding: 0 20px;
  margin: 0 auto;
}
.works-cont-img {
  background-color: #7a3145;
  padding-top: 40px;
  padding-bottom: 40px;
}
.works-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.works-image {
  border-radius: 30px;
  width: 335px;
  height: 450px;
  overflow: hidden;
}
<section>
  <div class="container works-container">
    <div class="works-cont-img">
      <div class="works-image">
        <img src="https://www.catstep.ru/upload/webp/70/iblock/76b/76bb21df67230809c5d8909cc81f9930.webp" alt="" />
      </div>
    </div>
  </div>
</section>


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

Автор решения: Arcadiy

В стилях где используете padding и margin добавьте position:relative;

→ Ссылка