The idea is that each image has a caption below it, but the image+caption are treated as inline so they run one after the other from left to right. I've also tried with the "float: left" in various places but can't get it to behave as desired either. Any suggestions appreciated.
The overarching problem is that "width: 30%" applied to an image doesn't mean 30% of the page width. It means 30% of the available horizontal space and/or 30% of the image's intrinsic width. (Someone else probably remembers which factor applies when.) You need to shift this number to div.thm to get the effect you want. Yes, it's correct and appropriate to have numbers that add up to a little less than 100%, so keep that. You have to allow for margins and borders and padding and gremlins and so on.
While you're at it, why don't you dump all that extraneous "display: block" stuff-- which is just asking for trouble in an element that isn't inherently block-level --and instead set div.thm to "text-align: center" and put in a hard line break? Or, as an alternative, shove each piece-- image and caption-- into a paragraph of its own.
"float" and "inline-block" don't belong in the same style declaration. One or the other. Here you want "inline-block" only.
Do you have some other div.thm elsewhere that isn't inside a div.row and therefore behaves differently? Or, in the alternative, do you have some other css for "div.row div" that needs to be overridden? If not, the css is over-constrained and the user's browser has to do more work to end up in the same place.
You may find it useful to attach different colored borders to each of your elements. Then you can more easily see what's happening where.
It works fine for me in webkit and mozilla, even with all the extraneous stuff. Except of course that the image I used was out of proportion until I ditched the misplaced "30%". Now, if you're in MSIE < 8 (or, for some purposes, < 11 ;) ) ...