Responsive Image Grid Inconsistency in image sizes - responsive-design

Question

I am creating a full width grid of images that use media queries to change how many columns of images there are. You can see a working demo here: http://vitaminjdesign.com/grid/
Using img{max-width: 100%} the images stretch to the width of its container. This works great, and the demo is working. As you can see, there should be a 1px space between each image. I am using the border-box model so the space is created by using padding-right.
BUT, if you resize the window, you will notice that the 1px margin between images sometimes change, and appear to have these inconsistent amounts of white space between/below images.
Upon inspection of each image, the browser is rendering the images at slightly different sizes (1px difference, but no more). This creates these uneven lines. The question is, if every image is EXACTLY the same size, how are they being rendered at slightly different sizes (which is turn causes this layout problem)? If you inspect each image, you will notice that the sizes are sometimes different, and sometimes the same (depending on the screen width).
CSS Below:
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#work{width:100%; clear:left;}
#work li{width:20%; height:auto; padding-right: 1px; padding-bottom: 1px; float:left; position: relative; transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;}
#work li a{display: block; position: relative; width: 100%; height: auto;}
#work li img{display: block; max-width: 100%; height: auto; }
I will not list the media queries here, but all they do is change the width of the list items.
Any thoughts as to why this is happening and how I can fix it?

Answer 1

The issue is on your media-queries and nth-child selectors. But I'm not really sure why setting border-right: none; is adding 1px of height for the grid. To solve the problem just delete the border-right: none; inside this selectors:
#work li:nth-child(3n+3) {
border-right: none; //Delete this
}
#work li:nth-child(2n+2) {
border-right: none; //Delete this
}

Answer 2

Removing the margin attribute on the * selector solves the problem for me.
* {
-moz-box-sizing: border-box;
font-weight: normal;
padding: 0;
}

Answer 3

The problem is because each list item has a calculated width. BEcause all of the columns EXCEPT the last column have a padding-right / border-right, they effectively have a different width, thereby making the image a different width/height. By removing the rule for zero padding/border on the last item of the column, all of the images have the exact same width and height.