The z-index always destroys my header how can I fix it?

body {
  background-color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 19px 20px;
  background: #DCdCdC
}

.logo {
  position: fixed;
  top: -10px;
  font-size: 32px;
  padding: 20px 20px;
  color: #fff;
  text-decoration: none;
  font-weight: 650;
}

.navbar a {
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  margin-left: 400px;
  word-spacing: 2px;
  z-index: 1;
}

.products .box-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.products .box-container .box {
  flex: 1 1 30rem;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .1);
  border-radius: .5rem;
  border: .1rem solid rgba(0, 0, 0, .1);
  position: relative;
  transition: 1s;
  z-index: 0;
}

.products .box-container .box .image {
  position: relative;
  text-align: center;
  padding-top: 2rem;
  overflow: hidden;
}

.box:hover {
  transform: scale(1.05);
  z-index: 0;
}

.products .box-container .box .image .icons {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
}

.products .box-container .box .image .icons a {
  margin-left: 8rem;
  margin-bottom: -3rem;
  height: 4rem;
  line-height: 6rem;
  font-size: 1.25rem;
  width: 50% background: black);
  color: #000;
}

.products .box-container .box .content {
  padding: 2rem;
  text-align: center;
}

.products .box-container .box .content h3 {
  font-size: 2rem;
  color: #000;
}

.products .box-container .box .content price {
  font-size: 1.5rem;
  color: black;
  font-weight: bolder;
  padding-top: 1rem;
}

<div class="header">
  <a href="1-Seite.html" class=l ogo>fashion</a>
  <nav class="navbar">
    <a href="1-Seite.html">Home</a>
    <a href="2-Seite.html">Shop</a>
    <a href="#">Über uns</a>
  </nav>
</div>
<section class="products" id="products">
  <h1 class="heading"> latest <span> products</span> </h1>
  <div class="box-container">
    <div class="box">
      <div class="image">
        <img src="bb.hoodie.png" width="50%;" id="box" alt="">
        <div class="icons">
          <a href="#" class="fas fa-heart"></a>
          <a href="#" class="cart-btn">add to cart</a>
          <a href="#" class="fas fa-heart"></a>
        </div>
      </div>
      <div class="content">
        <h3>MEDIUM FIT B HOODIE</h3>
        <div class="price"> 1.225€ <span></span> </div>
      </div>
    </div>
    <div class="box">
      <div class="image">
        <img src="bbjacke.png" width="50%;" id="box" alt="">
        <div class="icons">
          <a href="#" class="fas fa-heart"></a>
          <a href="#" class="cart-btn">add to cart</a>
          <a href="#" class="fas fa-heart"></a>
        </div>
      </div>
      <div class="content">
        <h3>RACING JACKET</h3>
        <div class="price"> 3.100€ <span></span> </div>
      </div>
    </div>
    <div class="box">
      <div class="image">
        <img src="nfs.hose.png" width="50%;" alt="">
        <div class="icons">
          <a href="#" class="fas fa-heart"></a>
          <a href="#" class="cart-btn">add to cart</a>
          <a href="#" class="fas fa-heart"></a>
        </div>
      </div>
      <div class="content">
        <h3>HEAVY WASHED BOMBER</h3>
        <div class="price">2.175€ <span></span> </div>
      </div>
    </div>
    <div class="box">
      <div class="image">
        <img src="nfs.bomber.png" width="50%;" alt="">
        <div class="icons">
          <a href="#" class="fas fa-heart"></a>
          <a href="#" class="cart-btn">add to cart</a>
          <a href="#" class="fas fa-heart"></a>
        </div>
      </div>
      <div class="content">
        <h3>GREY INSIDE OUT BOMBER</h3>
        <div class="price"> 2.750€ <span></span> </div>
      </div>
    </div>
    <div class="box">
      <div class="image">
        <img src="ro.coat.png" width="50%;" alt="">
        <div class="icons">
          <a href="#" class="fas fa-heart"></a>
          <a href="#" class="cart-btn">add to cart</a>
          <a href="#" class="fas fa-heart"></a>
        </div>
      </div>
      <div class="content">
        <h3>HOODED COAT GREY/BLACK </h3>
        <div class="price"> 4.250€ <span> </span> </div>
      </div>
    </div>
    <div class="box">
      <div class="image">
        <img src="ro.coat 2.png" width="50%;" alt="">
        <div class="icons">
          <a href="#" class="fas fa-heart"></a>
          <a href="#" class="cart-btn">add to cart</a>
          <a href="#" class="fas fa-heart"></a>
        </div>
      </div>
      <div class="content">
        <h3>HOODED COAT BLACK</h3>
        <div class="price"> 4.250€ <span> </span> </div>
      </div>
    </div>
  </div>