33% grid bug in CSS

33% grid bug in CSS

Okay, so I have a row of three images that have width: 33.3%;. So if their
container is width: 500px;, all of them should have a width of 167px!
However, this isn't the case. The image of the pancakes has a width of
166px, and this is leaving a small gap at the end.
Here is the jsFiddle :: http://jsfiddle.net/PUnFs/2/