Centrar dos divs con margenes en un div ?

[Sumerio]

Hola a la comunidad, soy un poco nuevo en el tema de maquetacion, resulta que un div padre, donde va contener dos divs hijos por fila, osea es como cada div tenga el mismo tamaño con un espacio margen, lo logre hacerlo de alguna forma, pero cuando lo pruebo con otra pantalla de otra dimension, no funciona del todo bien, porque aparece solo un div por fila (mas corta la pantalla del monitor).
Les muestro mi codigo css:

Código:

<style type="text/css">			
	.inner-panel {
		width: 46%;
		margin: 5px 10px 5px 10px;
		border: 3px solid #5C9CCC;
		display: inline-block;
	}				
	.outer {
		width: 100%;
		text-align: center;
	}				
	.inner {
		width: 76%;
		margin: 0 auto;
		text-align: center;
	}				
	.inner-blank {
		width: 12%;
		margin: 0 auto;
		text-align: center;
	}   
</style>

Código HTML:

<div class="outer">
	<div class="inner-panel">
		codigo
	</div>
	<div class="inner-panel">
		codigo
	</div>
	<div class="inner-panel">
		codigo
	</div>
	<div class="inner-panel">
		codigo
	</div>
</div> 

Si le muestro en otra pantalla, me sale este problema:



Alguien podria orientarme a solucionar este problema.

[alzacon]

Es un problema de matemáticas. width: 100%, si no hay nada que haga que cambie en elementos padres, correspondera al ancho del navegador, y seguramente el de la pantalla.

(46%*ancho+10px+10px)*2 =< ancho

El =< es un "menor o igual"

Si el resultado es menor o igual no hay problema, pero si es mayor pasa eso.

[pzin]

A la suma de alzacon le faltaría además sumar ese borde que pones, que son 12 pixeles más en total por fila. Realmente solucionarías todo con:

Código CSS:

.inner-panel {
  float: left;
  width: calc(50% - 20px);
  box-sizing: border-box;
  margin: 5px 10px;
  border: 3px solid #5C9CCC;
}
 

[alzacon]

Iniciado por pzin

A la suma de alzacon le faltaría además sumar ese borde que pones, que son 12 pixeles más en total por fila.

Pues es verdad, el complicado modelo de caja estandar. Y otra vez con las propiedades que necesitan prefijos, como box-sizing en firefox.

[pzin]

Iniciado por alzacon

Pues es verdad, el complicado modelo de caja estandar.

Y a mi me llamaban loco cuando decía que el modelo de caja del antiguo IE (<7) era más correcto, y ahora resulta que todos usamos box-sizing: border-box, que debe de ser un alias de imitate-former-ie-box-model: true.