Problemas con galería de imágenes en css

[mgocx]

Hola como están!?!

Mi problema se encuentra cuando al cambiar la resolución de la pantalla la galería se desplaza a la izquierda sin respetar la linea con el resto.

Dejo link de la pagina para que se vea lo que estoy haciendo:

http://primiti.institutogironzi.com/

Codigo CSS:

Código:

#caja_galeria{
top:640px;
float:inherit;
position:absolute;
margin-left:158px;
}
#caja_galeria ul{
padding:0px;
}
#caja_galeria li{
width:293px;
height:149px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color:#fff;
border:1px solid #CCCCCC;
display:inline;
float:left;
text-align: center;
margin-right:35px;
}
#caja_galeria li img{
margin-top:6px;
}

HTML:

Código HTML:

<div id="caja_galeria">
<ul>
	<li><img src="images/tea.png"></li>
	<li><img src="images/tea.png"></li>
	<li><img src="images/tea.png"></li>
</ul>
</div> 

PD: es la galería de imágenes de abajo que tiene 3 imágenes...
en la resolución 1280 x1024 me funciona como yo quiero que se vea pero en 1024 x 768 se va hacia la izquierda y queda fatal :(

Muchas Gracias a todos.....!

[IsaBelM]

justamente uso la resolución que dices que te da problemas y no lo aprecio. las imágenes quedan bien alineadas con el formulario y el slider

[mgocx]

Pero fíjate que en 1024x768 se corre y quedan 2 imagenes y una abajo....

Gracias ;)

[kseso?]

Defina la anchura de los li y/o las imágenes en %

Por cierto 1:
Cosas como

float:inherit;
position:absolute;

Por cierto 2:
Ul es un elemento de bloque, no necesita un div para contenerlo.

[mgocx]

Muchas gracias voy a resolver por esos lados mi problema!