Mi div es más grande que el ancho de mi ventana

Question

Esta es la css de mi div. Espero que el fondo para llenar toda la pantalla, pero es más grande que mi resolución de la pantalla, por lo que una barra de desplazamiento inferior aparece

.hero-unit { 
    padding:60px; 
    margin-top: 60px; 
    background: url("../img/bar2.jpg") no-repeat scroll 0; 
    height:233px; 
    width:100%; 
    left:0px; 
    background-size: cover; 
    position:absolute; 
    background-color:#eeeeee; 
} 

Answer 1

eliminar padding si es necesario, a continuación, disminuir width.

tratar de mantenerlos en porcentajes como

padding:5%; /*desired value*/ 
width:80%; /*desired value*/ 

cuando se añadirán, debe ser menor o igual al 100%. Si tiene margin, considérelo también. (Asumir margin:5%;)

Por ejemplo:

<----------------100%----------------> 
    margin | padding| div |padding | margin 
|<--5%-->|<--5%-->|<--80%-->|<--5%-->|<--5%-->| 

Este es el mismo para Horizontal (anchura) o ajustes verticales (altura).

Answer 2

Está agregando relleno al ancho ya del 100%.

Lo que necesita hacer (si usa porcentajes) es cambiar su relleno por un porcentaje y hacerlo agregar hasta el 100 por ciento.

Por ejemplo:

padding:5%; 
width:90%; 

---

también encontré una alternativa usando overflow: hidden para quitar la barra de desplazamiento. Sin embargo, esto no eliminará su problema ya que el relleno aún se desbordará en la ventana, solo que no visiblemente.

html, body 
{ 
    width:100%; 
} 

body 
{ 
    overflow:hidden; 
} 

Ver el jsfiddle here.

Answer 3

Esto podría deberse a los márgenes y al relleno del cuerpo.

Añadir este bloque a su cuerpo para ver si ayuda:

body { 
    margin: 0 
    padding: 0 
} 

Además, se está definiendo el relleno a un elemento ya 100%, por lo que es más grande que el cuerpo.

Answer 4

Puede utilizar el cuadro de dimensionamiento

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
-moz-box-sizing: border-box; /* Firefox, other Gecko */ 
box-sizing: border-box; 

Esto hace que sea cuando se agrega el relleno, margen, o fronteras que no afectará a la anchura. (Esto no funcionará en IE7 y abajo)

Answer 5

A menudo, el desbordamiento horizontal ocurre debido a un elemento cuya opacidad es 0. Tampoco puede ver el elemento pero conduce a un desbordamiento horizontal. Agregue el siguiente código a css.

body { 
overflow-x: hidden; 
} 
.hidden-thing { 
position: absolute; 
left: 100%; 
width: 50px; 
height: 50px; 
opacity: 0; 
}