Um display: "inline-block" nas tags <a> também não seria uma boa?

Oi Roger,

Seria uma boa alternativa sim, mas as <li> em volta de cada <a> ainda se comportariam como blocos, que é sua forma de visualização padrão.

Então você até pode deixar os <a> como inline-block, mas o pai delas ainda seria bloco, não nos fazendo alcançar o nosso objetivo de deixá-los lado-a-lado.

Com relação a área de clique, dê uma conferida no CSS, pois seu HTML está 100%, ok? Veja se existe alguma regra sendo puxada sem querer ou se está faltando alguma declaração CSS.

Espero ter ajudado e bons estudos,

Abcs!

Eu conferi o css e não encontrei alguma propriedade que influenciasse nesse comportamento estranho. Segue o link dos arquivos html e css:

https://drive.google.com/file/d/0B63yeVAs4D_JRUthNUdiZHlnUnc/view?usp=sharing

JPEGs do problema:

https://drive.google.com/file/d/0B63yeVAs4D_JemZNSFcxQUVZZVk/view?usp=sharing

https://drive.google.com/file/d/0B63yeVAs4D_JV2RISm05X1A5cUk/view?usp=sharing

Só quando eu coloco inline block no a que envolve a imagem e passo as medidas da imagem tanto para o li quanto para o a é que a área clicável da imagem fica sem deslocamento.

JPEGs da "Solução":

https://drive.google.com/file/d/0B63yeVAs4D_JU1RnaURaem9ENlk/view?usp=sharing

https://drive.google.com/file/d/0B63yeVAs4D_JOXpIdVU5c05QVTQ/view?usp=sharing

Eu não acho que seja a solução ideal, pois repete o mesmo código em dois elementos, mas não estou conseguindo encontrar outra forma.

A solucao 2 fica mais focada, pois pega direto o elemento que voce precisa de fato, o <a>.

Mas de qualquer forma ainda seria necessario colocar ou um float ou um inline-block nas <li>, pois elas que precisam ficar uma do lado da outra.

Se precisar colocar as mesmas declaracoes em dois elementos voce poderia juntar os seletores da seguinte forma:

.seletor-um,
.seletor-dois {
  declaracoes css
}

Abcs!

Valeu, Natan!