Eu tenho uma grade de miniaturas:

.thumbnail-container {
          border: 1px solid red;
          float: left;
          width: 25%; (depending on screen size)
}

.thumbnail {
          display: block;
          height: auto;
          width: 200px;
          margin: 0 auto;
          padding: 0px;
}

Você entendeu a ideia...

Às vezes, existem 5 polegares, às vezes 4, 3, 2 ... na mesma linha, dependendo da largura da tela do dispositivo @media.

Como você pode ver na figura, meu problema é o espaçamento horizontal entre as miniaturas. Como a largura de cada contêiner de polegar é igual (25% na figura) e as miniaturas são centralizadas, háDuplo espaçamento entre 1º e 2º, 2º-3d, 3º-4º. Pelo contrário, o 1º polegar tem metade desse espaço à esquerda e o 4º à direita:

É assim: 1 (A) 2 (B) 2 (C) 2 (D) 1

E eu quero assim: 1 (A) 1 (B) 1 (C) 1 (D) 1

Alguma idéia de como tornar o espaçamento o mesmo?

Muito Obrigado!