CSS / HTML网格有神秘的差距

Question

我有一个过去正在运作的文章项目网格，但现在布局中存在一些“差距”。网格中的所有项目都使用相同的CSS，因此我无法理解为什么存在差距。我把它放在jsfiddle这里：http://jsfiddle.net/schatzkin/0fh30d7h/1/原始页面在WordPress中，但我不认为这是问题的根源。

以下是CSS的相关内容：

.featured-grid {
  float: left;
  min-height: 425px;
  margin: 1em .5em 0 0;
  width: 31%; }

.featured-title-grid h4 {
  font-size: 18px; }

 .featured-author-grid {
  float: left; }

.featured-date-grid {
  float: right;
  margin: 0 0 1em 0;
  font-size: 15px; }


.featured-image-grid {
 clear: left;
 height: 200px;
  width: 100%;
  margin: 1em 0 0;
  padding: 1em 0 1em; }

.featured-date-feed {
  clear: left;
  margin: 1em 0 0; }

.featured-news-feed {
  background: #efefef;
  float: left;
  margin: .5em 2em 2em 0;
 padding: .5em; }