html - Ancho 100% con bordes blancos a su alrededor. ¿Por qué?

css image

Question

Ok, estoy tratando de diseñar un sitio web que tenga una imagen en la parte superior que abarque todo el ancho del navegador. Y debajo de eso quiero poner contenedores div de diferentes colores que también abarcan todo el ancho. algo así: http://hayden-demo.squarespace.com/

Intenté background-size: cover pero quiero fondos diferentes para cada sección de la página. Lo único que he encontrado después de muchas horas de búsqueda es el ancho: 100%, pero deja bordes blancos alrededor de mi imagen ... Por favor, ayuda, estoy desesperado. Este es mi CSS actual:

 .mainimg {
background-image: url(_DSC0656.jpg);
background-repeat: no-repeat;
background-position: center center;
-moz-background-size: cover;
background-size: cover;
width:100% !important;
height: 700px;
margin:0 auto;
display:block;

}

Answer 1

¿intentó restablecer el margen y el relleno de todos los elementos a 0? Si no, intente seguir el código en su archivo css.

*{
padding:0;
margin:0;
}

Answer 2

El elemento del body tiene algunos márgenes por defecto. A menos que los elimine, cualquier elemento que coloque dentro, sin importar su ancho (a menos que esté en posición absolute , creo) tendrá algunos bordes. No son fronteras, sino el gabinete entre el final de su elemento y el costado del cuerpo. Prueba esto :

body{
margin: 0;
}

Si eso no funciona, muéstrenos un ejemplo de su código en JSBin, Codepen o similar (o incluso una versión en vivo si es posible).