Unwanted white space when using margin-right

Hi all!!

I would like to ask you something as i didnt found the solution of it, and i’m afraid i dont know the exactlly words to search…

The problem is the next:
I have a grid of thumbnails (3 rows of 2 thumbnails each)
There is a line at the top of the grid and at the bottom.

To get the grid work, I floated (left) the thumbnails and added a margin-right:10px; to separate them.

The problem is that the first thumb adds its spearation correctly, but the second thumb adds the separation too (obviously) but it creates a blanc space and doesnt let the second thumbnail to lay at the right part of its container.

I dont know if i explained it correctly so i better upload an screenshot of the problem (i cant even link to the project as i’m working it locally)

SCREENSHOT

the problem is at the right part of the image.
You see that the thumbnail is 5px ago from the end of the line?

The initial idea of this design was the thumbnails having 10px of separation, and 0 separation from the top and bottomo line.

Please forgive me for my EXTREMELLY bad english, i?m doing my best.

Thanks in advance.

PS: i also tried thing like overflow:hiden in the main container, but nothing….

Any idea?

Hugs.