Responsive gallery nesting problem.

Hi guys, I followed this tutorial http://designshack.net/articles/css/how-to-build-a-responsive-thumbnail-gallery/ but slightly different sizes as I only want three columns.

The thumbnail gallery works perfectly until I resize to approx 1920 x 900 then the following two thumbnails shrink slightly in height causing the thumbnails to irradicately position all over the page. This video concisely depicts the problem which appears to be some kind of nesting problem shown on the page live here.

Already tried:

1. Checked all my thumbnails and they appear to be the correct size (370 x 678);
2. Ensured all images and text are highlighted in an anchor tag;
3. Minimum height 3em to h3 class="structures" (heading underneath the thumbnails);

<div class="galleryItem">
			<a href="structures/concrete-basement.php"><img src="images/basement/thumbnails/concrete-basement.jpg" alt="Award winning concrete basement"/></a>
			<a href="concrete-basement.php"><h3 class="structures" itemprop="name">Concrete Basement</h3></a>
		</div>
	
    	<div class="galleryItem">
			<a href="lift-shaft.php"><img src="images/lift-shaft/thumbnails/lift-shaft-26.jpg" alt="Lift shaft" title=""/></a>
		<h3 class="structures" itemprop ="name"><a href="lift-shaft.php">Concrete lift shaft</a></h3>
		</div>

.galleryItem {
max-width: 31.3%;
max-height: 35%;
padding: 1%;
float: left;	
}

.galleryItem img {
width: 100%;
border-radius: 8px;	
}

h3.structures {
width: 100%;
text-align: center;
min-height: 3em;	
}

Grateful of any guidance, I'm completely stuck on it and haven't managed to fix this problem in considerable time.