I'm trying to get my image thubnails on my index page to float left - 3 across at 300px width on my site: http://craigmurray.virb.com/work

Right now, there seems to be some odd glitch not allowing me to do this. The parent container for the index is 960px wide, so the math should work out giving me an even 30px margin between each thumbnail.

Here is what I have currently. Why doesn't this get me 3 across?:

Code:
#index ul.thumbs li {
  width: 300px;
  height: 225px;
  margin: 0 30px 30px 0;
  float: left;
}

#index ul.thumbs li img {
  width: 300px;
}
Thanks for any insight/help to resolve.