HTML anchor not clickable

I am trying to design a navigation menu, but when I add the css the some links (buttons) become unclickable (button 1 and 4). I am developing in Symfony 4, but I do not think that matters and I do not use bootstrap. Also I found that if I remove the li tags around the links, it also works normal (but that would break the hole design).

My CSS

nav ul {
    list-style-type: none;
    padding: 0;
}
nav li {
    display: inline;
    float: left;
}
nav a:link , nav a:visited {
    display: block;
}
#user_tabs_professional {
    display: flex;
    margin: 0 5px;
    position: relative;
}
#link1{
    margin-left: 180%;
}
#link2{
    margin-left: 200%;
}#link3{
    margin-left: 260%;
}#link4{
    margin-left: 180%;
    margin-top: 40px;
}#link5{
    margin-left: 199%;
    margin-top: 40px;
}#link6{
    margin-left: 260%;
    margin-top: 40px;
}#link7{
    margin-left: 190%;
    margin-top: 40px;
}

My navigation bar

    <nav>
        <ul>
        <div>
            <li><a href="/profile/professional/account" id="link1"class="tablinks btn" onclick="openTab(event, 'favorites')">
                <img src="{{ asset('images/icons/profile_100.png') }}">
                <p class="bold">
                Fiche d'identité<br/><br/>Dirigeant, Etablissement
                </p>
            </a></li>

            <li><a href="/profile/professional/company" id="link2"class="tablinks btn" onclick="openTab(event, 'favorites')">
                <img src="{{ asset('images/icons/identity_100.png') }}">
                <p class="bold">
                    Profil de mon établissement<br/><br/>Dirigeant, Etablissement
                </p>
            </a></li>

            <li><a id="link3"class="tablinks btn" onclick="openTab(event, 'favorites')">
                <img src="{{ asset('images/icons/formulas_100.png') }}">
                <p class="bold">
                    Mes Offres<br/><br/>Dirigeant, Etablissement
                </p>
            </a></li>
        </div>
        <div>
            <li><a id="link4"class="tablinks btn" onclick="openTab(event, 'favorites')">
                <img src="{{ asset('images/icons/new_training_100.png') }}">
                <p class="bold">
                    Mes Clients<br/><br/>Dirigeant, Etablissement
                </p>
            </a></li>

            <li><a href="{{ path('professional_settings', {id: app.user.id}) }}"id="link5"class="tablinks btn" onclick="openTab(event, 'favorites')">
                <img src="{{ asset('images/icons/my_trainings_100.png') }}">
                <p class="bold">
                    Connection, Notifications&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/><br/>Dirigeant, Etablissement
                </p>
            </a></li>

            <li><a href="/profile/professional/support" id="link6"class="tablinks btn" onclick="openTab(event, 'favorites')">
                <img src="{{ asset('images/icons/contact_100.png') }}">
                <p class="bold">
                    Contactez léquipe
                    <br>
                    SHINEBOX<br/>Dirigeant, Etablissement
                </p>
            </a></li>
        </div>
        <div>
            <li><a id="link7"class="tablinks btn" onclick="openTab(event, 'favorites')">
                <img src="{{ asset('images/icons/new_100.png') }}">
                <p class="bold">
                    Découvrez les nouveaux produits SHINEBOX<br/><br/>Dirigeant, Etablissement
                </p>
            </a></li>
        </div>
        </ul>
        </nav>