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? - css

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;
}'''