Как сделать панель навигации поверх карусели?

Недавно я добавил карусель на свой сайт-портфолио. Однако карусель перекрывает панель навигации, когда я прокручиваю вниз (она находится поверх нее).

Мой код

Навбар.js:

...
return (        
    <nav class = "header">
      <ul class = "list">
        <li className='item'>
          <Link to = "/">Home</Link>
        </li>
        <li className='item'>
          <Link to = "/about">About</Link>
        </li>
        <li className='item'>
          <Link to = "/projects">Projects</Link>
        </li>
        <li className='item'>
          <Link to = "/contact">Contact Me</Link>
        </li>
      </ul>
    </nav>
)

Навбар.css:

.header {
    position: sticky;
    top: 0;
    display: flex;
    list-style-type: none;
    background-color: #3D405B;
    width: 100%;
}
...

Home.js

const skills = DataSkills.map(skill => {
    return <Card
        key = {skill.id}
        skill = {skill} />
})

const responsive = {
    superLargeDesktop: {
        breakpoint: { max: 4000, min: 3000 },
        items: 5
    },
    desktop: {
        breakpoint: { max: 3000, min: 1024 },
        items: 4
    },
    tablet: {
        breakpoint: { max: 1024, min: 464 },
        items: 2
    },
    mobile: {
        breakpoint: { max: 464, min: 0 },
        items: 1
    }
};

return (
    <Carousel responsive = {responsive} className='home--skills-list'>
        {skills}
    </Carousel>
)

Главная.css:

.home--skills-list {

}

Ни одна из других карточек, изображений и текста не перекрывает панель навигации, только карусель. Поскольку это так, я предполагаю, что мне не нужно ничего менять в панели навигации, а только в карусели (пожалуйста, поправьте меня, если я ошибаюсь). Как сделать так, чтобы карусель не перекрывала панель навигации?

Буду признателен за любую помощь!