Hi. Help me. I created a carousel but my navbar is overlapping in the carousel. which I want my navbar and carousel to be separate i use css

const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");

hamburger.addEventListener("click", () => {
  hamburger.classList.toggle("active");
  navMenu.classList.toggle("active");
})

document.querySelectorAll(".nav-link").forEach(n => n.addEventListener("click", () => {
  hamburger.classList.remove("active");
  navMenu.classList.remove("active");
}))

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  padding: 10px;
  background: rgb(24, 24, 24);
  color: #ddd;
  line-height: 1.5;
  font-family: 'poppins', sans-serif;
}

header {
  background-color: #022e31;
}

li {
  list-style: none;
}

a {
  color: white;
  text-decoration: none;
}

figure {
  position: relative;
  left: 50%;
}


/************************* NavBar Start ****************************/

.navbar {
  min-height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}

.nav-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
  position: fixed;
}

.nav-branding {
  font-size: 2rem;
}

.nav-link {
  transition: 0.7s ease;
}

.nav-link:hover {
  color: dodgerblue;
}

.hamburger {
  display: none;
  cursor: pointer;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: white;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}


/*                       NavBar Hamburger Start                           */

@media(max-width:2000px) {
  .hamburger {
    display: block;
  }
  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
    -webkit-transform: translateY(8px) rotate(45deg);
    -moz-transform: translateY(8px) rotate(45deg);
    -ms-transform: translateY(8px) rotate(45deg);
    -o-transform: translateY(8px) rotate(45deg);
  }
  .hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
    -webkit-transform: translateY(-8px) rotate(-45deg);
    -moz-transform: translateY(-8px) rotate(-45deg);
    -ms-transform: translateY(-8px) rotate(-45deg);
    -o-transform: translateY(-8px) rotate(-45deg);
  }
  .nav-menu {
    position: fixed;
    left: -100%;
    top: 70px;
    gap: 0;
    flex-direction: column;
    background-color: #022e31;
    width: 100%;
    text-align: center;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
  }
  .nav-item {
    margin: 16px 0;
  }
  .nav-menu.active {
    left: 0;
    position: fixed;
  }
}


/*                       NavBar Hamburger End                            */


/************************* NavBar End ****************************/


/************************* Carousel Start ****************************/

.carousel-item {
  height: 100vh;
  min-height: 300px;
}

.carousel-caption {
  bottom: 220px;
}

.carousel-caption h5 {
  font-size: 45px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 25px;
}

.carousel-caption p {
  width: 60%;
  margin: auto;
  font-size: 18px;
  line-height: 1.9;
}

.carousel-caption a {
  text-transform: uppercase;
  text-decoration: none;
  background: darkorange;
  padding: 10px 30px;
  display: inline-block;
  color: #000;
  margin-top: 15px;
}

@media only screen and (max-width: 767px) {
  .carousel-caption {
    bottom: 165px;
  }
  .carousel-caption h5 {
    font-size: 17px;
  }
  .carousel-caption a {
    padding: 10px 15px;
    font-size: 15px;
  }
}


/************************* Carousel End ****************************/

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;900&display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <title>Halaman 1</title>
</head>
<!----------------------------- NAVBAR Start -------------------------------------->
<header>
  <nav class="navbar">
    <a href="#" class="nav-branding">My Web.</a>
    <ul class="nav-menu ">
      <li class="nav-item"><a href="/" class="nav-link active">Home</a></li>
      <li class="nav-item"><a href="/About/" class="nav-link">About</a></li>
      <li class="nav-item"><a href="/Contact/" class="nav-link">Contact</a></li>
    </ul>
    <div class="hamburger">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </div>
  </nav>
</header>
<!----------------------------- NAVBAR End --------------------------------------->

<!----------------------------- Layout Start --------------------------------------->
<!----------------------------- first Layout Start --------------------------------------->
<!-- Carousel Start -->
<div class="carousel slide" data-bs-ride="carousel" id="carouselExampleIndicators">
  <div class="carousel-indicators">
    <button aria-label="Slide 1" class="active" data-bs-slide-to="0" data-bs-target="#carouselExampleIndicators" type="button"></button> <button aria-label="Slide 2" data-bs-slide-to="1" data-bs-target="#carouselExampleIndicators" type="button"></button>    <button aria-label="Slide 3" data-bs-slide-to="2" data-bs-target="#carouselExampleIndicators" type="button"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img alt="..." class="d-block w-100" src="https://www.kompas.com/skola/read/2019/12/21/150000569/mengapa-langit-berwarna-biru?page=all">
      <div class="carousel-caption">
        <h5 class="animated bounceInRight" style="animation-delay: 1s">Web Design</h5>
        <p class="animated bounceInLeft d-none d-md-block" style="animation-delay: 2s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, nulla, tempore. Deserunt excepturi quas vero.</p>
        <p class="animated bounceInRight" style="animation-delay: 3s"><a href="#">Learn More</a></p>
      </div>
    </div>
    <div class="carousel-item">
      <img alt="..." class="d-block w-100" src="https://www.detik.com/edu/detikpedia/d-5853311/mengapa-di-siang-hari-langit-berwarna-biru-siswa-ini-penjelasannya">
      <div class="carousel-caption">
        <h5 class="animated bounceInRight" style="animation-delay: 1s">Graphics Design</h5>
        <p class="animated bounceInLeft d-none d-md-block" style="animation-delay: 2s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, nulla, tempore. Deserunt excepturi quas vero.</p>
        <p class="animated bounceInRight" style="animation-delay: 3s"><a href="#">Learn More</a></p>
      </div>
    </div>
    <div class="carousel-item">
      <img alt="..." class="d-block w-100" src="https://id.wikipedia.org/wiki/Langit">
      <div class="carousel-caption">
        <h5 class="animated bounceInRight" style="animation-delay: 1s">Photography</h5>
        <p class="animated bounceInLeft d-none d-md-block" style="animation-delay: 2s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, nulla, tempore. Deserunt excepturi quas vero.</p>
        <p class="animated bounceInRight" style="animation-delay: 3s"><a href="#">Learn More</a></p>
      </div>
    </div>
  </div><button class="carousel-control-prev" data-bs-slide="prev" data-bs-target="#carouselExampleIndicators" type="button"><span aria-hidden="true" class="carousel-control-prev-icon"></span> <span class="visually-hidden">Previous</span></button> <button class="carousel-control-next"
    data-bs-slide="next" data-bs-target="#carouselExampleIndicators" type="button"><span aria-hidden="true" class="carousel-control-next-icon"></span> <span class="visually-hidden">Next</span></button>
</div>
<!-- Carousel End -->
<!--File JS-->
<script src="script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js">
</script>
</body>

</html>