JavaScript scrollIntoView gets randomly stuck

I have made a one-page website using HTML, CSS/Tailwind, and Vanilla JavaScript. The issue is that when I click on one of the navbar links sometimes it works, and sometimes it gets stuck; where it does not respond until I click multiple times on the link(The number of times is not consistent). Not sure what the issue could be.

HTML markup:

<ul class="hidden sm:flex uppercase items-center space-x-10">
    <li class="nav-link">
        <a onclick="scrollToSection('#main-container')">Hjem</a>
    </li>
    <li class="nav-link">
        <a onclick="scrollToSection('#services')">Tjenster</a>
    </li>
    <li class="nav-link">
        <a onclick="scrollToSection('#pricing')">Priser</a>
    </li>
    <li class="nav-link">
        <a onclick="scrollToSection('#contact')">Kontakt</a>
    </li>
</ul>

JavaScript Code:

function scrollToSection(element) {
    var element = document.getElementById(element);
    element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"})
}

I was able to fix this thanks to the comment made by Rana; where it was pointed out that only the text(a tag) is clickable rather than the entire li element.

New HTML markup:

<ul class="hidden sm:flex uppercase items-center space-x-10">
    <li class="nav-link" onclick="scrollToSection('#main-container')">
        <a>Hjem</a>
    </li>
    <li class="nav-link" onclick="scrollToSection('#services')">
        <a >Tjenster</a>
    </li>
    <li class="nav-link" onclick="scrollToSection('#pricing')">
        <a >Priser</a>
    </li>
    <li class="nav-link" onclick="scrollToSection('#contact')">
        <a >Kontakt</a>
    </li>
</ul>