Distribuir 4 divs horizontal responsivo

[serbarmax]

Hola, pueden darme una mano? Intento distribuir horizontalmente 4 divs los cuales debe estar el primero de la izquierda bien al tope izquierdo y el derecho al tope derecho, en el centro los otros dos "en igual distribución", el tema es que en forma responsiva debería acomodarse.
Intenté el siguiente código pero se centra pero no se expande hacia los costados. Muchas gracias.

Código:

<div style="text-align: center; width: 100%;">
<div  style="display: inline-block; width:150px; 150px !important;  height: 117px;">
   <div class="contenedor">
        <a href="index.php/redireccion">
             <img src="images/stories/seguros/icono_simuladoactivo.jpg" alt="" border="0" /> 
             <img class="top" src="images/stories/seguros/icono_simuladoinactivo.jpg" alt="" border="0" />
        </a>
   </div>
</div>
<div  style="display: inline-block; width:150px; 150px !important;  height: 117px;">
   <div class="contenedor">
        <a href="index.php/redireccion">
             <img src="images/stories/seguros/icono_simuladoactivo.jpg" alt="" border="0" /> 
             <img class="top" src="images/stories/seguros/icono_simuladoinactivo.jpg" alt="" border="0" />
        </a>
   </div>
</div>
<div  style="display: inline-block; width:150px; 150px !important;  height: 117px;">
   <div class="contenedor">
        <a href="index.php/redireccion">
             <img src="images/stories/seguros/icono_simuladoactivo.jpg" alt="" border="0" /> 
             <img class="top" src="images/stories/seguros/icono_simuladoinactivo.jpg" alt="" border="0" />
        </a>
   </div>
</div>
<div  style="display: inline-block; width:150px; 150px !important;  height: 117px;">
   <div class="contenedor">
        <a href="index.php/redireccion">
             <img src="images/stories/seguros/icono_simuladoactivo.jpg" alt="" border="0" /> 
             <img class="top" src="images/stories/seguros/icono_simuladoinactivo.jpg" alt="" border="0" />
        </a>
   </div>
</div>
</div>

la clase contenedor permite alternar las imágenes que están presentadas cuando el cursor se posiciona sobre ellas.

Código:

.contenedor {
  position: relative;
  height: 90px; 
  width: 315px; 
  margin: 20px auto;  
}

.contenedor img {
  position: absolute; 
  left: 0; 
  /* transition: opacity 1s ease-in-out; */
}

.contenedor img.top:hover {
  opacity: 0;
}