Problèmes d'icône dans la barre de navigation réactive

Je suis un débutant pour faire face au développement et j'essaie d'expérimenter des modèles personnalisés pour la pratique. J'ai créé une barre de navigation réactive contenant un bouton «Contact» aligné à droite avec une icône de Fontaweomeome. Le problème se pose lorsque la barre NAVBAR s'effondre - l'icône "Contact" semble passer au-dessus du texte de contact. Quelqu'un pourrait m'aider? Je joins des images et du code ici.

nav{
    background-color: rgba(0, 0, 0, 0.75);
    font-size:1.33rem;
    position: relative;
}

#logo{
    margin-right: 3rem;
}

ul{
    display: inline-flex;
    margin-bottom:0;
    margin-top:0;
    padding:0;
    list-style-type: none;
    flex-flow:row;
    justify-content: flex-start;
    align-items: center;
}

.right-nav{
    position: absolute;
    right: 0;
}

a{
    display: inline-block;
    color: antiquewhite;
    text-decoration: none;
    padding:0.75rem 2.0rem;
}

a:hover{
    text-decoration: none;
    background-color: rgba(243,134,48,0.5); 
    color: rgb(255, 255, 255);
    font-weight: 500;
}

li{
    cursor: pointer;   
}

@media all and (max-width:600px){
    .main-nav{
        flex-direction: column;
        width: 100%;
    }

    a{
        padding: 12px 600px;
    }
    nav{
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
    }

    #logo{
        margin-right: inherit;
    }

    .right-nav{
        position: unset;
    }
}