He estado haciendo un pequeño proyecto pero, al hacerlo responsive, he visto que se crea un espacio en blanco al llegar a los 400 píxeles el cual se hace cada vez más grande si se reduce la pantalla. He probado con todo lo que he encontrado aquí y en otros lados (como el wisth en html y body, por ejemplo) pero sigue sin salirme nada. Esto es lo que sucede:
Eso es todo, sería de grandísima ayuda si me pueden ayudar, muchas gracias por su tiempo :')
(Nuevo): Muchas gracias por su apoyo, chicos. Este es el código HTML:
<body>
<header>
<div class="Encabezado">
<img src="Imagenes/001_ATe_Cuido_LOGO.svg" alt="Logo de TeCuido" class="Encabezado__Logo">
</div>
<nav>
<div class="seccion-menu">
<ul>
<li class="menu__items"><a href="index.html"
class="menu__hipervinculos-inicio">Inicio</a></li>
<li class="menu__items"><a href="servicios.html"
class="menu__hipervinculos">Servicios</a></li>
<li class="menu__items"><a href="nosotros.html"
class="menu__hipervinculos">Sobre nosotros</a></li>
</ul>
</div>
<div class="menu-contenedor">
<input type="checkbox" id="generador">
<label for="generador" class="boton"></label>
<nav class="nav-menu-boton">
<a href="index.html">Inicio</a>
<a href="servicios.html">Servicios</a>
<a href="nosotros.html">Sobre nosotros</a>
</nav>
</div>
</nav>
</header>
<main>
<div class="contenedor animate__animated animate__fadeIn">
<section class="contenedor__slider">
<div class="contenedor__slider__contenido">
<div>
<h2>Somos una empresa que se preocupa por tu salud y
comodidad </h2>
</div>
<img src="Imagenes/undraw_medicine_b1ol.svg" alt="Imagen
de doctores">
</div>
<div class="contenedor__slider__contenido">
<div>
<h2>Realizamos consultas y teleconsultas de la mano
de excelentes profesionales en el campo</h2>
</div>
<img src="Imagenes/undraw_doctors_hwty.svg" alt="Imagen
de doctores">
</div>
<div class="contenedor__slider__contenido">
<div>
<h2>Realizamos pruebas rápidas de COVID-19 a
domicilio y a las empresas que lo soliciten</h2>
</div>
<img src="Imagenes/undraw_medical_care_movn.svg"
alt="Imagen de doctores">
</div>
<div class="contenedor__slider__contenido">
<div>
<h2>Somos una empresa que se preocupa por tu salud y
comodidad</h2>
</div>
<img src="Imagenes/undraw_medicine_b1ol.svg" alt="Imagen
de doctores">
</div>
</div>
</div>
<section>
<div class="confiar animate__animated animate__fadeInLeft">
<article class="confiar__info">
<h2>¿Por qué confiar en nosotros?</h2>
<ul class="confiar__razones">
<li>Somos un equipo de profesionales altamente
capacitados trabajando en los principales
hospitales del país, como el Hospital Nacional
Edgardo Rebagliati Martins y el Instituto
Nacional de
Salud del Niño San Borja.</li>
<li>Contamos con amplia experiencia en el tratamiento
de diversas enfermedades.<br></li>
<li>Brindamos un excelente servicio en la comodidad
de tu hogar con todos los protocolos de
seguridad necesarios.</li>
</ul>
</article>
<aside>
<figure>
<img loading="lazy" src="Imagenes/medico index.webp"
alt="Imagen de doctor"
class=" confiar__imagen animate__animated
animate__fadeInRight">
</figure>
</aside>
</div>
</section>
<section>
<div class="consejo animate__animated animate__fadeInLeft">
<div class="consejo__info">
<h3 class="consejo__titulo">Consejo médico</h3>
<p>
Consume pescado 3 o más veces por semana, este nos
aporta ácidos grasos y tiene una alta
cantidad de proteínas.
</p>
</div>
</div>
</section>
</main>
<footer class="pie">
<div class="redes__container animate__animated animate__fadeIn">
<ul>
<li><a href="https://www.facebook.com/TeCuidoEnfermera"
target="#blank"
class="redes__container-facebook"><i class="fab fa-
facebook-f"></i></a></li>
<li><a href="mailto:[email protected]"
class="redes__container-gmail"><i class="far
fa-envelope"></i></a></li>
</ul>
</div>
<h4 class="pie__copyright animate__animated
animate__fadeIn">Copyright 2020 © TeCuido Todos los derechos
reservados</h4>
</footer>
<script src="main.js"></script>
</body>
</html>
Y el código CSS es este:
::selection {
background-color: rgb(16, 82, 100);
color: rgb(255, 255, 255);
}
.Encabezado {
background: #f1efed;
padding-left: 7em;
padding-right: 7em;
width: 100%;
}
.Encabezado__Logo {
display: block;
height: 12.375em;
margin: auto;
margin-bottom: 2.8em;
padding: 0.3em;
width: 27.375em;
}
ul {
padding: 0.74em;
text-align: center;
}
.seccion-menu {
background: #f1efed;
height: 2.8rem;
margin-top: -2.8em;
width: 100%;
}
.menu__items {
display: inline-block;
}
.menu__hipervinculos,
.menu__hipervinculos-inicio {
color: #8b7e78;
font-family: Montserrat;
font-size: 1.2rem;
font-weight: lighter;
text-decoration: none;
margin-left: 5em;
margin-right: 2.8em;
}
.menu__hipervinculos:hover,
.menu__hipervinculos-inicio:hover {
color: rgb(41, 122, 116);
transition: all 0.3s;
}
.menu__hipervinculos:active,
.menu__hipervinculos-inicio:active {
color: rgb(30, 87, 83);
transition: all 0.20s;
}
/*Sección menú desplegable*/
.menu-contenedor,
.boton,
.nav-menu-boton {
position: absolute;
}
.menu-contenedor {
margin: auto;
top: 10%;
left: 50%;
margin-left: -20px;
}
#generador {
display: none;
}
.boton {
z-index: 999;
margin-top: 9em;
width: 43px;
height: 43px;
background: rgb(68, 219, 224);
border-radius: 100%;
transition: all 0.5s ease-in-out;
box-shadow: 1px 3px 10px 0 rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.boton:before {
position: absolute;
top: 20px;
left: 9px;
content: '';
width: 25px;
height: 2px;
background: #fff;
transform: rotate(90deg);
}
.boton:after {
position: absolute;
top: 20px;
left: 9px;
content: '';
width: 25px;
height: 2px;
background: #fff;
}
.nav-menu-boton {
transform: translateY(-10%);
opacity: 0;
top: 10.875rem;
left: -50px;
transition: all 0.5s ease-in-out;
background: white;
margin: auto;
margin-left: -8em;
width: 25rem;
border-radius: 5px;
transform: translateY(0%);
box-shadow: 2px 3px 10px 0 rgba(0, 0, 0, 0.1);
z-index: 100;
}
.nav-menu-boton a {
text-align: center;
font-size: 1.25rem;
display: block;
margin: 20px 0;
color: rgb(68, 219, 224);
text-decoration: none;
font-family: Montserrat;
transition: all 300ms;
}
.nav-menu-boton a:hover {
color: rgb(73, 198, 202);
}
.nav-menu-boton a:active {
color: rgb(69, 178, 182);
}
#generador:checked~.nav-menu-boton {
opacity: 1;
transform: translateY(10%);
}
#generador:checked~.boton {
transform: rotate(135deg);
box-shadow: 0 0 0 0 transparent;
}
.contenedor {
width: 100%;
overflow: hidden
}
.contenedor__slider {
width: 100%;
display: flex;
margin-bottom: 2em;
}
.contenedor__slider__contenido {
width: 100%;
height: 20.5rem;
margin: auto;
display: flex;
justify-content: space-around;
align-items: center;
flex-shrink: 0;
margin-top: 3em;
}
.contenedor__slider__contenido>img {
width: 25rem;
}
.contenedor__slider__contenido>div {
width: 40%;
}
.contenedor__slider__contenido h2 {
color: #333333;
font-weight: 800;
font-family: Montserrat;
font-size: 1.65rem;
text-align: justify;
line-height: 1.875em;
}
.contenedor__slider__contenido a {
color: bisque;
text-decoration: none;
background-color: cadetblue;
width: 6.25rem;
display: block;
padding: 0.9375em 0;
text-align: center;
border-radius: 0.1875rem;
margin-top: 1.25rem;
}
.confiar {
display: flex;
margin-top: 3em;
width: 100%;
}
.confiar__info>h2 {
color: #4f7070;
font-family: Montserrat;
font-size: 2.5rem;
font-weight: lighter;
line-height: 1.2em;
margin: 0.75em;
margin-bottom: .5em;
margin-top: -.1em;
padding-left: 1.15em;
text-align: center;
}
.confiar__info {
color: #474747;
border-radius: 0.3em;
font-family: Montserrat;
font-size: 1.25rem;
line-height: 1.7em;
margin-top: -.7em;
padding-right: 1em;
margin-left: 4em;
padding-left: 1em;
padding-top: 2em;
text-align: justify;
width: 70%;
height: 31.5rem;
}
.confiar__razones {
text-align: justify;
}
.confiar__imagen {
border-radius: 0.3em;
height: 30rem;
margin-left: auto;
margin-right: 1.5em;
margin-top: 1.5em;
width: 63%;
}
.consejo__titulo {
color: rgb(89, 151, 155);
font-family: Sansita;
font-size: 2.5rem;
margin: 0.125em;
margin-bottom: .6em;
padding: 0.3em;
text-align: center;
}
.consejo__info {
background: #f1efed;
background: -webkit-linear-gradient(to right, #eeebeb, #f8f8f8);
background: linear-gradient(to right, #eeebeb, #f8f8f8);
border-radius: .5em;
color: rgb(100, 89, 71);
font-family: Sansita;
font-size: 1.4rem;
margin-left: 1.455em;
margin-right: 1.455em;
margin-top: 2.6em;
margin-bottom: 3em;
padding: .8em;
text-align: center;
}
.Whatsapp {
bottom: 2rem;
height: 3.8rem;
position: fixed;
right: 2.5rem;
width: 3.8rem;
}
.pie {
margin-top: 1em;
padding: .5em;
text-align: center;
width: 100%;
}
.redes__container {
display: flex;
align-items: center;
justify-content: center;
}
.redes__container ul li {
display: inline-block;
margin: 0.3125rem;
width: 3.125rem;
height: 3.125rem;
text-align: center;
}
.redes__container ul li a {
display: block;
padding: 0 0.545rem;
background-color: rgb(117, 106, 106);
color: #fff;
line-height: 3rem;
font-size: 1.35rem;
box-shadow: 0 0.1875rem 0.3125rem 0 rgba(0, 0, 0, .2);
transition: .2s;
}
.redes__container ul:hover a {
filter: blur(2px);
}
.redes__container ul li a:hover {
transform: translateY(-0.1875rem) scale(1.05);
box-shadow: 0 0.3125rem 0.3125rem 0 rgba(0, 0, 0, .4);
filter: none;
}
.redes__container-facebook:hover {
background-color: rgb(21, 21, 206);
}
.redes__container-whatsapp:hover {
background-color: rgb(117, 170, 11);
}
.redes__container-gmail:hover {
background-color: rgb(187, 18, 18);
}
.pie__copyright {
color: #242424;
font-size: .8rem;
font-family: Montserrat;
}
En las primeras líneas sale todo lo que le puse al body(Me guié un poco de lo que me recomendaron, lo que vi e, incluso, de cómo lo tenía hecho Twitter) pero nada :(
.html
y.css
para que veamos cuál es el contenedor que te está generando ese espacio de más. Échale un ojo a los padding y a los margin, la mayoría de las veces son los culpables.