I'm beginning to learn HTML/CSS and I have to make a header, and I'm having some troubles in the spacing I need to get between the texts on it. After trying a lot of things, I got the spacing right, but now somewhy the texts aint getting the interaction they should.

The HTML code is:

```html
<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="_css/estilo.css"/>
</head>
<body>
    <div class="header" id="header">
        <div class="header_sn">
            <a href="sobre-nos.html">Sobre nós</a></div>
        <div class="header_serv">
            <a href="servicos.html">Serviços</a></div>
        <div class="header_logo">
            <figure>
                <a href="home.html"><img id="logo_header" src="_imagens/logoimagem.png">
                    <figcaption>Palavras Cafeinadas</figcaption></a>
            </figure>
        </div>
        <div class="header_cont">
            <a href="contato.html">Contato</a></div>
        <div class="header_tel">
            <a><img id="logotel" src="_imagens/icone-telefone.png">19-99126972</a>
        </div>
</body>
</html>

```

And the CSS code is:

```
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond&display=swap');
@font-face{
    font-family: 'FontePadrao';
    src: url("../_fontes/CormorantGaramond-SemiBold.otf");
}
    :root{
        --color-fundo: #57290B;
        --color-letra: #EBDACC;

    }
    *{
        margin: 0;
        padding: 0;
    }

/* Formatação header fundo */

/* Format header writings */
body{
        font-family: 'Cormorant Garamond', serif;
        font-size: 18px; 
        line-height: 22px;
        color: var(--color-letra);
    }
.header, .header-esquerda, .header-direita{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.header{
    background-color: var(--color-fundo);
    height: 100px;
    justify-content: space-between;
    padding: 0 0 0 0;

}
.header_sn{
    position: absolute;
    padding: 39px 0px 39px 119px;
}

.header_serv{
    position: absolute;
    padding: 39px 0px 39px 324px;
}
.header_logo{
    position: absolute;
    padding: 39px 0px 39px 698px;
}
.header_cont{
    position: absolute;
    padding: 39px 0px 39px 1400px;
}
.header_tel{
    position: absolute;
    padding: 39px 0px 39px 1650px;
}

.header a{
    text-decoration: none;
    color: var(--color-letra);

}

/* Format header imgs */
img#logo_header{
    position: absolute;
    width: 43px;
    height: 54.86px;
    top:7px;
    padding: 0 181px;
}
img#logotel{
    position: relative;
    top: 7px;
    right: 10px;
}
figure figcaption{
    position: relative;
    top:15px;
    left: 135px;
}

```

And this is how the header looks right now, it is almost as it should be looking but I got that problem and couldn't finish it.
[![](https://i.stack.imgur.com/fkiS4.png)](https://i.stack.imgur.com/fkiS4.png)

Before I got to this final code, the interactions were working in my several others attempts, in this one they didn't work anymore.