Nav bar overlaying page content!

Question

Hello I have a page with a menu (Nav bar) and when I click on a link from the menu the page should direct to Session corresponding, for example, when I click on I have a Session about which should be displayed, it happens that when I do this to Session is with a hidden part behind the menu, ie the height menu is not respected as in the following image

What is with a blue outline is the Session, notice how it goes up there behind the menu.

HTML CSS

nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f5f5f5;
    position: fixed;
    top:0;
    width: 100%;

}
nav a img{
    display: flex;
    text-align: center;
    flex-direction: column;
    width: 200px;
    padding: 0;

}

nav > a{
    text-decoration: none;
    color: azure;
    font-weight: 700;
    font-size: 28px;
    font-family: serif
}

nav ul{
    list-style: none;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
nav ul li{
    text-align: center;
    width: 100%;
    font-weight: bold;
    font-size: 20px
}
nav ul li a {
    display: inline-block;
    padding: 10px 0;
    width: 100%;
    text-decoration: none;
    color: darkblue;

}

 <nav>
    <a href="#top"><img src="imagens/Logo%20DMDUQUE%20Final.png"></a>
    <ul>
        <li><a href="#sobre">Sobre</a></li>
        <li><a href="#servicos">Serviços</a></li>
        <li><a href="#contato">Contato</a></li>                
    </ul>
</nav>

Answer 1

What’s happening is that as your element <nav> is with position: fixed it does not "take up space" on the page, so the content below starts at the top, below the <nav>.

Puts a padding-top: 15px (Being 15px only an example value, you can change depending on the code) in your content that the top bar will no longer overwrite.