Despite setting overflow-x: hidden on the body element, I'm still experiencing horizontal scrolling and can't seem to find a solution.
I've searched online for solutions without success. That's why I'm reaching out here in hopes of finding assistance. Thank you in advance!
Here are the provided HTML, SCSS, and JavaScript:
HTML:
<!-- HEADER -->
<div id="home" class="container-fluid home__hero">
<nav class="menu">
<div>
<h4 class="logoMenu">Guinda Social Media</h4>
</div>
<ul class="nav-links">
<li class="linkMenu liHome"><a href="#home" class="linkHome">Home</a></li>
<li class="linkMenu liAbout"><a href="#about" class="linkAbout">About</a></li>
<li class="linkMenu liTrabajos"><a href="#trabajos" class="linkTrabajos">Trabajos</a></li>
<li class="linkMenu liContacto"><a href="#contacto" class="linkContacto">Contacto</a></li>
</ul>
<div class="contenedorBurger">
<div class="burgerBtn">
<div class="linea1"></div>
<div class="linea2"></div>
<div class="linea3"></div>
</div>
</div>
</nav>
<!-- FIN HEADER -->
<!-- HERO -->
<div class="row justify-content-center align-content-center">
<div class="col-sm-12 col-md-12 col-lg-12 home__hero__col1" data-aos="fade-up" data-aos-duration="3000">
<h1><span class="home__hero__h1--social">social</span><span
class="home__hero__h1--guinda flicker-2">guinda</span><span
class="home__hero__h1--media">media</span>
</h1>
</div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 home__hero__col2">
<section class="example example--2 bounce-top">
<span class="scroll-icon">
<span class="scroll-icon__dot"></span>
</span>
</section>
</div>
</div>
</div>
</div>
SCSS:
@import "variables.scss";
[SCSS content]JS:
[JavaScript code]