Problème de positionnement image suivant la résolution

Bonjour,

J'ai créé sur mon site www.nicolas79.ch un bloc de pages en relation. Les styles définis sont :

.related_posts {float: left;
position: relative;
display: inline-block;
max-width:550px;
}

.related_posts ul {
margin:0;
overflow:hidden;
}
.related_posts li {
float: left;
list-style: none;
margin: auto;
}
.related_posts li:first-child {
margin-left: 0;
}
.related_posts li a {
display: block;
font-size: 12px;
line-height: 16px;
text-align:center;
text-decoration:none;
max-width: 110px;
margin:auto;

}
.related_posts img {
border: 2px solid #DDDDDD;
height: 110px;
width: 110px;

}
.related_posts li a:hover {
text-decoration: underline;
}

Le problème est que lorsque je consulte mon site via mon smartphone, il y a parfois des décalages avec les images et le lien. Ils peuvent se retrouver aligner à droite ou décalé vers le bas.

Que puis-je faire pour résoudre ce problème ?

Merci pour votre prochaine aide.