I have a nav bar but the link sends the content below the sticky header. What can I do so the content remains visible using CSS only?

Question

This is the HTML. I need the header to be visible all the time, but when I click the link in the nav bar, the content goes below the sticky header. Can I solve this ussing only CSS? I have tried several solutions but none of them seems to work, perhaps because I use a header wraping another header.

 '''<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" 
 rel="stylesheet">

<header id="header" class="header-outer"><div class= "header-logo"><a><img alt="img" 
id="header-img" class= "smaller-image img " src= 
https://logopond.com/logos/4797fa121d6d6c33b9d7d4411b994aa8.png 
https://farm4.static.flickr.com/3071/2371922778_c1634f19e2.jpg?v=0></a></div>
<div class="header-inner responsive-wrapper">

<div>
<h1>Le Librairie du Parthénon</h1>  
</div>

<nav class="header-navigation">
<ul>
<li><a class= "nav-link" href="#catalogo">Catalogo</a></li>
<li><a class= "nav-link" href="#ejemplares-raros">Raros</a></li>
<li><a class= "nav-link" href="#ejemplares-unicos">Unique</a></li>
</ul>
</nav>
</div>
</header>



<main>


<div class="box content-box">

<div class="black-box">
<section id="catalogo">
<div class="desc">
<h2 class="dark-red">Catalogo de libros</h2>
<p>Nuestro catalogo tiene una amplia colección de ejemplares antiguos y poco comunes</p> 
</div>
</section>
</div>


<div class="container">
<section id="ejemplares-raros">
<div class="desc">
  <h2 class="dark-red">Ejemplares raros</h2>
  <p>Libros extremadamente raros y difíciles de encontrar</p> 
</div>
</section>
</div>

<div class="container">
<section id="ejemplares-unicos">
<div class="desc">
  <h2 class="dark-red">Ejemplares únicos</h2>
  <p>Libros únicos e invaluables</p> 
</div>
</section>
</div>

<div>
<p>Los libros malditos mas peligrosos de la historia</p>
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/eZIjIWbEZdk" 
 title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
 encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>



 <div>
 <form action="https://www.freecodecamp.com/email-submit" id="form">
 <input name="email" id="email" type="email" placeholder="email"/>
 <input id="submit" type="submit"/>
 </form>
 </div>


 </div>
 </main>'''

This is the CSS. You can see the header inner an header outer yha I use to make the header change size when you scroll down the page. The problem is that when I click a link in the nav bar the content goes below the header and it is not visible. I am a begginer and I would like to find a solution with CSS only, I already tried several solutions but anything seems to work.

  '''@media (min-width: 576px;) 


  nav {
  margin-top: 10px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 50px;
  color: rgb(143,55,36);
  }

  body {
  padding: 0;
  margin: 0;
  }

  .smaller-image {
  width:150px;
  }

  header {
  display:flex;
  position: fixed;
  top:0;
  left:0;
  bottom:10;
  width:100%;
  }

  .header-outer {
  display: flex;
  align-items: center;
  position: sticky;
  height: 120px;
  margin: 0;
  top: -50px;
  background-color: rgb(153,0,0);
  box-shadow: 0 2px 10px 0 rgba(0,0,0, 0.1);  
  }

  .header-inner {
  height: 70px;
  position: sticky;
  margin:0;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between
  }

  .header-logo img {
  display: block;
  height: 70px;
  }

  .header-navigation {
   display: flex;
   flex-wrap: wrap;
   }

   .responsive-wrapper {
    width: 90%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    }

    nav > ul {
    width: 35vw;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    font-weight: 400;
    font-size: 22px;
    color: silver;
    }

    ul { 
    color: rgb(123,55,36);
    }

    a {
    color: rgb(21,5,11);
     }

    [type= "submit"] {
    padding: 15px; 
    margin: 15px;
     display: flex;
    }

    .box {
     border-style: solid;
     border-color: rgb(21,72,82);
     border-width: 5px;
     background-color: rgb(82,32,21);
     color: rgb(21,72,82);
     padding: 10px;
     }

     .second-box {

      border-style: solid;
      border-color: rgb(21,72,82);
      border-width: 5px;
      background-color: rgb(82,32,21);
      color: rgb(21,72,82);
      padding: 10px;
      }

      .black-box {
       background-color: #292929;
       padding: 30px;
       margin-top: 85px;
  
           }

           *,
           *::before,
           *::after {
            box-sizing: border-box;
            }

            .content-box { 
             box-sizing: content-box; 
             }

             main  {
             margin-top: 0px;
             margin-bottom: 0px;
             margin-left: 180px;
             margin-right: 150px;
              }

             .padding {
              padding-top: 170px;
              }'''