Cuadros Css con fondo mal

[Kudsick]

Buenas a todos.

Tengo una pagina en la cual cree unos cuadros en css cada cuadro tiene un color de fondo diferente por lo que cada uno tiene la propiedad de color dentro de su div, pero todos tienen las mismas caracteristicas, la cuestion aqui es que cada fondo de cada cuadro parece tener un tipo padding del lado izquierdo el cual hace que el borde que es blanco y el fondo esten separados y se vea hacia atras el fondo de la pagina, solo quisiera repararlos para que coordinen bien el fondo con el borde de los cuadros. Para no enredarlos les dejo mi codigo.


Mi Css:

Código:

box {
	float:left;
	color:#fff; padding: 15px;
	border: 5px solid #FFFFFF;
	height: 400px;  
	width: 500px;  
	margin-top: 0px;  
	margin-right: auto;  
	margin-bottom: 5px;  
	margin-left: 20px;
	overflow:auto;
	text-overflow:ellipsis; 
	}

Mi Html:

Código:

<div class="box" style="background:#996633">este el primero</div>
<div class="box" style="background:#996633">este el segundo
</div>
<div class="box" style="background:#990033">este el tercero
</div>
<div class="box" style="background:#660000">este el cuarto
</div>

Nota: No soy experto ni nada, pero cuando cambio el modo de compatibilidad a ie 7 y 9 se ven bien, pero en ie 8 es donde se descomponen, es para la intranet de mi trabajo donde todas las maquinas tienen ie8.

De antemano muchas gracias!