edges around items

Question

hello, I am developing a site in html and css and I want to put a header with a logo and below that a navigation menu but whenever I put the elements are some white borders around

have a solution how to get them? one of the solutions I found was to use this stretch in each:

position:absolute;
top: 0;
right: 0;

and for the menu to be below the logo:

margin-top:120px;

is visually good but I wanted another solution because in my view this looks like a gambiarra. here is the general html code:

<section class="cima">
    <figure class="logo">
        <img src="./ASSETS/logo.png" alt="logo CSA"> 
        <figcaption hidden>Logo CSA</figcaption> 
    </figure>
</section>

<nav class="menu">
    <ul>
        <li><a href="./index.html">Home</a></li>
        <li><a href="./index.html">Serviços</a></li>
        <li><a href="./index.html">Quem somos</a></li>
        <li><a href="./index.html">Contato</a></li>
    </ul>
</nav>

css:

.cima{
    width: 100%;
    height: 120px;
    background-image: url(../ASSETS/images.jfif);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center; 
    text-align: center;
}
.menu{

    width: 100%;
    height: 50px;
    background-color: lightslategrey;
}