Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Hay un margen blanco a la derecha

Al aplicar o no el meta, me muestra un margen a la derecha, es decir una parte blanca vertical, en la que no se aplica nada, así se cambie la resolución sigue estando ahí, lo había notado hace rato pero pensé que luego lo solucionaba, no se donde tengo el error; se aplica para todos los html, en productos baja una imagen gracias de antemano

`body{ font-family: 'Montserrat', sans-serif; }

header{ background-color: #BBBBBB; padding: 20px 0; }

.caja{ width: 940px; position: relative; margin: 0 auto; }

nav{ position: absolute; top: 110px; right: 0; }

nav li{ display: inline; margin: 0 0 0 20px; }

nav a{ text-transform: uppercase; color: #000000; font-weight: bold; font-size: 22px; text-decoration: none; }

nav a:hover{ color: #c78c19; text-decoration: underline; }

.productos{ width: 940px; margin: 0 auto; padding: 50px; }

.productos li{ display: inline-block; text-align: center; width: 30%; vertical-align: top; margin: 0 1.5%; padding: 30px 20px; box-sizing: border-box; border-color: #000000; border-width: 2px; border-style: solid; border-radius: 10px;

}

.productos li:hover{ border-color: #c78c19; }

.productos li:active{ border-color: blue; }

.productos h2{ font-weight: bold; font-size: 30px; }

.productos li:hover h2{ font-size: 33px; }

.productos li:hover .producto-precio{ font-size: 33px; }

.producto-descripcion{ font-size: 18px; }

.producto-precio{ font-size: 20px; font-weight: bold; margin-top: 10px; }

footer{ text-align: center; background: url(imagenes/bg.jpg); padding:40px; }

.copyright{ color:#FFFFFF; font-size: 13px; margin:20px; }

.main-contacto{ width: 60%; margin: 0 auto; }

form{ margin: 40px 0; }

form label, form legend{ display: block; font-size: 20px; margin: 0 0 10px; }

.input-padron{ display: block; margin: 0 0 20px; padding: 10px 25px; width: 50%; }

.checkbox{ margin:20px 0; }

.enviar{ width: 40%; padding: 15px 0; font-size: 18px; font-weight: bold; color:white; background: orange; border:none; border-radius: 5px; transition: 1s all; cursor:pointer; }

.enviar:hover{ background: darkorange; transform: scale(1.2); }

table{ margin: 40px 40px; }

thead{ background: #555555; color:white; font-weight: bold; }

td,th{ border: 1px solid #000000; padding: 8px 15px; }

/CSS para home/

.banner{ width: 100%; margin: 0 0 20px; }

.principal{ padding: 3em; background: #FEFEFE; width: 940px; margin: 0 auto;}

.titulo-principal{ text-align: center; font-size: 2em; margin: 0 0 1em; }

.principal p{ margin: 0 0 1em; }

.principal strong{ font-weight: bold; }

.principal em{ font-style: italic; }

.utensilios{ width: 120px; float: left; margin: 0 20px 20px 0; }

.mapa{ padding: 3em 0; background: linear-gradient(#FEFEFE, #888888); }

.mapa p{ margin: 0 0 2em; text-align: center; }

.mapa-contenido{ width: 940px; margin: 0 auto; }

.diferenciales{ padding: 3em 0; background: #888888; }

.contenido-diferenciales{ width: 640px; margin: 0 auto; }

.lista-diferenciales{ width: 40%; display: inline-block; vertical-align: top; }

.items{ line-height: 1.5; }

.items:first-child{ font-weight: bold; }

.items:before{ content: "★"; }

.imagen-diferenciales{ width: 60%; transition: 400ms; }

.imagen-diferenciales:hover{ box-shadow: 10px 10px 30px 20px black; opacity: 50%; }

.video-principal{ background: #888888; }

.video-contenido{ width: 30%; margin: auto; }

iframe{ border: 2px solid black; border-radius: 25px; }`

Así queda la página de productos, se bajó la imagen cuando apliqué la fuente de google fonts monserrat

1 respuesta

Hola Alumno, espero que estés bien.

Puedes lograr compartir su código de forma correcta haciendo clic en este botón y colocando tu código entre los acentos:

https://cdn1.gnarususercontent.com.br/6/409216/a3962870-1dd0-4f80-a135-54b482f9094a.png

Para poder ayudarte también necesito ver como está su HTML con las clases aplicadas, te pido que por favor envíelo por aquí.

Si tienes alguna duda, no dejes de preguntar. ¡Estamos aquí para ayudarte!.

¡Saludos!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios