Overflow on CSS

Question

I can't figure out how to remove the overflow of these links placed in the navbar.

I wish they were shown as in this photo:

Screenshot1 (Here they have been inserted as buttons)

But instead they come out like this:

Screenshot2 (Here they have been inserted as links [a tags])

HTML:

<header>
    <a href="index.html" target="_self"><img src="../media/logo.png" alt="Logo Teatro Amatoriale" title="Logo Teatro Amatoriale" id="logo_img"></a>
    <nav>
        <a href="#" class="bottone_attivo nav_button" target="_self">Home</a>
        <a href="about.html" class="bottone_inattivo nav_button" target="_self">Chi Siamo</a>
        <a href="contacts.html" class="bottone_inattivo nav_button" target="_self">Contatti</a>
        <a href="booking.html" class="bottone_inattivo nav_button" target="_self">Prenota</a>                    
        <a href="findus.html" class="bottone_inattivo nav_button" target="_self">Come Trovarci</a>
        <a href="news.html" class="bottone_inattivo nav_button" target="_self">News</a>
    </nav>
</header>

CSS:

.bottone_inattivo
{
    background-color: #1B6845;
    border-radius: 15px;
    border: none;
    color: white;
    padding: 12px 28px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

.bottone_attivo
{
    background-color: #37b47a;
    border-radius: 15px;
    border: none;
    color: black;
    padding: 12px 28px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    pointer-events: none;
    font-weight: bold;
}

@media screen and (min-width: 160px) and (max-width: 649px) /* Media query per schermi piccoli in verticale*/
{
    .nav_button
    {
        width: 100%;
        margin-top: 1%;
        margin-bottom: 1%;
        outline: 1px solid red;
        
    }

    nav
    {
        background-color: grey;
        outline: 1px solid red;
    }    
}

Can you help me out? Thanks! :)