Alinha imagem com float

Fala pessoal, meu primeiro poste e gostaria de tirar uma dúvida que estou quebrando a cabeça no Wordpress.

Eu quero alinhar 3 imagens diferente e ancoradas em 3 links.

Preciso que as imagens fiquem uma ao lado da outra sem espaço e sem ultrapassar o limite uma da outra.

Este é o exemplo que eu preciso fazer.

/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/N7JcV2f.png&key=5e6ab11fa5be4bd7ab503515edc5d066f6b431bcc203996a47981ca26facab1f" alt="N7JcV2f.png" />

Este é o código que estou usando:

<center>

<div style="float: left; width: 33%;"><a href="[https://www.c3u.com.br](https://www.c3u.com.br)"><img style="float: left;" [src="https://c3u.com.br/wp-content/uploads/2015/12/Atleta-Rudy1.png"](src=) alt="" width="448" height="416" border="0" /></a></div>

 

 

<div style="float: left; width: 33%;"><a href="[https://www.c3u.com.br](https://www.c3u.com.br)"><img style="display: block; margin-left: auto; margin-right: auto;" [src="https://c3u.com.br/wp-content/uploads/2015/12/Diego-Diego1.png"](src=) alt="" width="448" height="416" border="0" /></a></div>

 

 

<div style="float: left; width: 33%;"><a href="[https://www.c3u.com.br](https://www.c3u.com.br)"><img style="float: right;" [src="https://c3u.com.br/wp-content/uploads/2015/12/Diego-Luan1.png](src=)

" alt="" width="448" height="416" border="0" /></a></div>

 

</center>

Podem ver no link: https://c3u.com.br/home-page-default-wp/

Problemas

Porem existe dois problemas. O primeiro é que a ultima imagem não cola no canto direito deixando um espaço de uns 20px fora a barra de rolagem. O segundo é que o tema que eu uso tem o mouseover que ao passar o mouse a imagem fica branca, não trato isso como um problema, no entanto ao passar o mouse o efeito aparece em uma parte das imagens vizinha.

Preciso colocar uma imagem ao lado da outra com estilo fullscreen sendo que cada uma contem seu link e que uma respeite a margem da outra.

Nota

Depois que conseguir fazer isso, preciso mudar esse mouseover para que quando passe o mouse aparece outra imagem. Não sei se precisa mudar no css pois o comando seguinte não funcionou.

<a href="ENDEREÇO-DO-LINK"><img src="ENDEREÇO-DA-IMAGEM-1" border="0" onmouseover="this.src='ENDEREÇO-DA-IMAGEM-2'" onmouseout="this.src='ENDEREÇO-DA-IMAGEM-1'"></a>

Declaro que estou começando a aprender agora.

Qualquer ajuda é bem vinda e desde já agradeço a atenção de todos, abraço.