Это для хэдера?

у него следующая секция с фоном(белая загогулина) перекрывает из-за отрицательного марджина

наверное)

z-index будет работать, если секции с отрицат. марджином даешь position relative и z-index

Ну так можно просто clip-path хрень внизу отрисовать (или на крайняк svg вставить) через какой-то before и не делать никаких приколов со стилями)

++

Но понятно что это вопрос не к тебе, а к автору вопроса

Привет, кто может подсказать, почему не меняется размер динамически. У меня есть контейнер и в нем 4 карточки и если я хочу уменьшить размер экрана, то они не уменьшаются динамически, а только при перезагрузке страницы: внизу немного псевдокода

<div className="container">
     <div className="slide">
      <div className="box">
       <div className="detail">
        <img className="slide_img" src=""/>
        <p className="slide_text">Kulinarik</p>
       </div>
      </div>
      <div className="box">
       <div className="detail">
        <img className="slide_img" src=""/>
        <p className="slide_text">Kulinarik</p>
       </div>
      </div>
      <div className="box">
       <div className="detail">
        <img className="slide_img" src=""/>
        <p className="slide_text">Kulinarik</p>
       </div>
      </div>
      <div className="box">
       <div className="detail">
        <img className="slide_img" src=""/>
        <p className="slide_text">Kulinarik</p>
       </div>
      </div>
     </div>

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}
.box-container {
    width: 100%;
    height: 240px;
    position: relative;
    margin-bottom: 15px;
}
.container {
    width: 100%;
    height: 240px;
    overflow: hidden;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    padding: 10px;
}

.slide {
    min-width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
}
.slide .box {
    display: block;
    width: 14%;
    height: 100%;
    overflow: hidden;
    position: relative;
    margin-right: 20px;
    margin-left: 15px;
}
.slide_img {
    width: 100%;
}
.box .detail {
    position: absolute;
    text-align: center;
    width: 100%;
}
.slide_text {
    font-family: Montserrat;
    font-size: 20px;
    margin-top: 10px;
}

В чем может быть проблема?

А слайдер подключён?

Да, там слайдер/Свайпе

Лучше бы в песочницу кинул чем так в чат копипастить, подсказали бы быстрее

Сейчас залью

Может там нужно настраивать кол-во элементов под адаптив?

Только сам слайдер отказывается работать в песочнице

js мб нужно подгрузить?

Так там внизц скрипт

Сейчас попробую в отдельный файл

Кстати помогло)