Hola @patricia_96,
Los compañeros @hugo_8933 y @manueldeco han acertado con el diagnóstico. El problema con width: 100vw; es que esta unidad de medida incluye el ancho de la barra de desplazamiento vertical del navegador (si existe), lo que hace que el elemento sea un poco más ancho que el viewport real y provoca ese molesto scroll horizontal.
Para solucionar esto de forma limpia en tu custom.css sin que afecte a otros elementos, puedes hacer dos cosas:
- Prevenir el scroll horizontal en el
body (o html): Esto evitará que la barra de desplazamiento aparezca debido a tu banner. Es una solución común para este tipo de escenarios.
- Centrar correctamente el banner a 100vw: Asegurándote de que el elemento, aunque tenga
100vw, se posicione de forma que el exceso se distribuya equitativamente fuera del viewport, o que simplemente no lo cause.
Aquí tienes la modificación que puedes añadir a tu themes/classic/assets/css/custom.css:
html, body {
overflow-x: hidden; /* Evita la barra de desplazamiento horizontal */
}
.home-hero-banner {
width: 100vw; /* Mantiene el ancho total del viewport */
position: relative;
left: 50%; /* Mueve el elemento 50% a la derecha del punto de referencia de su padre */
transform: translateX(-50%); /* Lo mueve 50% de su propio ancho a la izquierda para centrarlo */
height: 400px;
background-image: url(../img/hero-bg.jpg);
Con overflow-x: hidden en html, body, la barra horizontal desaparecerá. Y con position: relative, left: 50%, y transform: translateX(-50%), el banner se centrará perfectamente en el viewport, rompiendo cualquier contenedor max-width sin causar desbordamientos visibles. Recuerda limpiar la caché de PrestaShop y la del navegador después de aplicar los cambios.