Main section nao fica na main e sim no cabeçalho? | Layouts Responsivos: trabalhando com layouts mobile

Pessoal, estava seguindo o curso bem tranquila, mas agora me deparei com um problema. Programei toda a parte da main e quando atualizei o arquivo no meu browser percebi que ela nao estava aparecendo. Dei um inspect e o main parece estar fixado na parte da header... Comecei a dissecar o codigo e percebi que o problema se resolve (mesmo que o arquivo perca a formatação) se eu retiro a ligação com o arquivo css do cabeçalho, então acredito que o problema esteja ali... Mas não consigo identificar o que está causando isso. Vou deixar meu código do index aqui e o css do cabeçalho, se alguém conseguir identificar o problema ficarei muito feliz!

Index:

<!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">
    <title>Home | Apeperia</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Open+Sans&display=swap" rel="stylesheet">
    <link href="./css/reset.css" rel="stylesheet" />
    <link href="./css/cabecalho.css" rel="stylesheet" />
    <link href="./css/chamada.css" rel="stylesheet" />
    <link href="./css/base.css" rel="stylesheet" />
</head>
<body>

    <header class="cabecalho container">

            <img class="cabecalho__logo" src="./img/logo-apeperia.svg" alt="Logo da Apeperia">

          <nav class="cabecalho__navegacao">
            <ul>
                <li class="cabecalho__link"><a href="#">Sobre</a></li>
                <li class="cabecalho__link"><a href="#">Planos</a></li>
                <li class="cabecalho__link"><a href="#">Blog</a></li>
                <li class="cabecalho__link" class="cabecalho__link"><a href="#">Destaques</a></li>
                <li class="cabecalho__link"><a href="#">Institucional</a></li>
                <li class="cabecalho__link"><a href="#">Contato</a></li>
          </nav>

          <section class="chamada container">
            <h2 class="chamada__titulo">Aplicativos na medida</h2>
            <p class="chamada__texto ">Apeperia tem um jeito inovador de comparar e montar aplicativos para pequenas e médias empresas.</p>
            <a href="#" class="chamada__botao botao" >Conheça os planos</a>
          </section>
    </header>

    <main>
      <section class="destaques container">
        <h2 class="destaques__titulo">Destaques</h2>
        <a href="">
          <figure class="destaques__painel">
            <img src="/img/comecando-criar-logotipo.png" alt="Painel do post sobre criação de logotipo" class="destaques__painel__img">
            <figcaption class="destaques__painel__texto">Conheça as primeiras etapas para a criação de um logotipo</figcaption>
          </figure>
        </a>

        <a href="">
          <figure class="destaques__painel">
            <img src="" alt="Painel do post sobre fotografia com celular" class="destaques__painel__img">
            <figcaption class="destaques__painel__texto">Veja dicas de como fotografar usando seu celular</figcaption>
          </figure>
        </a>

        <a href="" class="destaques__botao botao">Receber destaques por email</a>

      </section>
    </main>



</body>
</html>

CSS cabeçalho:

.cabecalho {
    color: var(--branco);
    background: var(--bg-chamada-mobile);

    width: 100%;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding-top: .75rem;
    padding-bottom: .75rem;

    border-bottom: 1px solid var(--borda-cabecalho-mobile);

    position: absolute;
}

.cabecalho__logo {
    margin-bottom: 1rem;
}

.cabecalho__navegacao {
    text-align: center;
    margin-top: 1rem;
}

.cabecalho__link {
    font-size: 1.1rem;

    display: inline-block;

    margin-right: .7rem;
    margin-left: .7rem;
}