Venía bien diseñando el index, y de repente me apareció el scroll horizontal en el navegador. Vamos, tuve que borrar casi toda la página para intentar solucionarlo. Y no hay caso. De seguro es una pavada, pero la verdad que no sé.
<div class="carrousel__container">
<!-- <img src="media/mdatacenter.jpg" alt="" class="carrousel__image1"> -->
</div>
<div class="carrousel__container">
<!-- <img src="media/mdatacenter.jpg" alt="" class="carrousel__image1"> -->
</div>
<div class="carrousel__container">
<!-- <img src="media/mdatacenter.jpg" alt="" class="carrousel__image1"> -->
</div>
EL CSS:
*{
padding:0;
margin:0;
box-sizing: border-box;
font-family: "Exo 2";
}
body{
height: 100vh;
width: 100vw;
}
.carrousel__container{
width: 90%;
height: 40%;
background-color: black;
display: block;
margin-top: 1px;
}
No pongo lo demás, puesto que elimine todos los elementos css. ¡La imagen dentro del div (carrousel container) está comentada!
Cuando los elementos son varios y sobrepasan la altura de la pantalla, está bien, se crea el scroll vertical. Pero no entiendo ¿por qué el horizontal?
Se me queda un pedazo de pantalla en horizontal que no sé de dónde sale. Ya borré márgenes, saqué los padding, busqué lo del colapso de márgenes... No sé qué sucede.
Aclaro que hay conceptos fundamentales que no conozco de css. No sé si el body debe ser configurado de esa manera o no!
Podría solucionarlo con un overflow : hidden
, pero no es la solución que busco, puesto que quisiera que los números me den correctamente, sino ya pasar al responsive va a ser un lío.
width: calc(100% - 1rem)
a tucarrousel__container
? De otra forma, ve si en tu HTML no haya estilos en línea y otra hoja de estilos enlazadoinspeccionar
, el navegador si divide en dos. En un lado queda tu pagina y en el otro el código. Si posicionas el mouse sobre el código en la pagina si visualiza el elemento correspondiente marcando además los margin y padding. De esta manera encuentras el elemento que está generando el scroll