Behavior Smooth does not work Java script

Question

Well I’m trying to make a smooth scroll for my pure js page, but the behavior property:"Smooth" is not working, follow the code.

Javascript

const menuItems = document.querySelectorAll('.landing__nav-bar a');


menuItems.forEach(item =>{
    item.addEventListener("click", function(event){
        event.preventDefault();
        const element = event.target;
        const id = element.getAttribute('href');
        const section = document.querySelector(id);
        section.scrollIntoView({
            behavior:"smooth"
        })
       

    })
})

HTML

 <nav class="landing__nav">
                    <div class="landing__nav-bar">
                        <a href="#"><img src="./images/Logo.svg" alt="Logo Gabriel Bryan" id="landing__logo"></a>
                        <ul class="landing__nav-bar--left">
                            <li><a href="#about-me">Sobre mim</a></li>
                            <li><a href="#habilities">Habilidades</a></li>
                            <li><a href="#">Portfólio</a></li>
                            <li id="landing__nav-bar--active"><a href="">Fale comigo</a></li>
                        </ul>
                    </div>
                </nav>

[...]

Section where I want you to go

<img src="./images/Separator.svg" alt="tag" id="habilities">
            <div class="about-me__marcation marcation-two" >
                <h2>SKILLS</h2>
            </div>


   <section id="about-me">
        <div class="about-me__content">
            <div class="about-me__marcation">
                <h2>SOBRE MIM</h2>
            </div>
         </div>
   </section>

I’ve used window.scroll, window.scrollTo, and the css behavior-scroll. Nothing works, I’ve circled everything I can’t find explanation of why, the click event has the default behavior, at the moment I don’t want to use a framework to make this functionality, because I’m starting in js.