Buongiorno!
Chiedo supporto a qualche esperto che possa spiegarmi il problema..
Sto realizzando un sito in html5 e responsive design. Va tutto abbastanza bene per cui tra poco lo dovrei mettere on line, ma c'è una pagina che mi crea qualche grattacapo. Si tratta del portfolio dove c'è un elenco di li con incluse immagini.
Questo elenco di li si vede bene dalla risoluzione 768px in poi ma scendendo, i[*] più esterni mi "crollano" pur stando tutti all'interno dello stesso <ul>.

Il problema non si vede se simulo la visione responsive da firefox su desktop, ma si vede sui device mobile (ho provato sia su s3mini, su iphone e su tablet 7 pollici).

La pagine incriminata è: http://www.graf.roma.it/html52/portfolio.html

Le regole le ho impostate nella media query del 320px e sono

codice:
.gallery  {
	padding: 0px;
	width:100%;
	}

.gallery ul {
	list-style: none; 
	}
	
.gallery ul li { 
	display: inline; 
	}
	
.gallery ul img {
	margin:0px 10px 10px 0px;
	float:left;
	width:80px; height:80px;
	border: #9F0139 3px solid;
	}

.gallery ul a:hover img {border: 3px solid #f60;}

il codice invece dei vari[*] in html è:

codice:
[*][img]images/portfolio/oliveri.jpg[/img]
Grazie!!