Weird lines appearing below post grids

Hi guys,

I am coding a website for a client and it requires me to have post grids by category. I’ve coded this a couple of different ways now (first using php foreach codes, but then changing them when I thought they were the issue) and I can’t seem to get rid of these weird lines appearing below the first two post tiles under “Flappers & Feminism” and “Fiction”.

It seems odd that it’s coming up under every other one of these and even stranger that the coding is almost identical for each, so I’m not sure what’s going on here. I’ll post the code I’m using for this section below:

<?php query_posts('showposts=1'); ?>
<?php while (have_posts()) : the_post(); ?>
 							<article id="post-<?php the_ID(); ?>" <?php post_class( 'cf' ); ?> role="article">
							  <div id="featured">
<?php the_post_thumbnail( 'bones-thumb-770' ); ?>
									<h1 class="h2 entry-title" style="text-align: center; width: 100%; margin-top:0.7em;"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>

								</div>

							</article>
 <?php endwhile; ?>

						  <div class="grid-head">
						  <img src="https://katejordandesign.com/testing/wp-content/uploads/2015/08/flappers-and-feminism1.png">
						  </div>
						  <div class="category-grid">
						 <?php query_posts('cat=7&showposts=3'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php the_post_thumbnail( 'bones-thumb-240' ); ?>
									<h2 class="cat-grid-entry-title" style="text-align: center; width: 100%; margin-top:0.7em;"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
									  <?php echo ShortenText(get_the_title()); ?></a></h2>

<?php endwhile; endif; ?>

</div>

						  <div class="grid-head">
						  <img src="https://katejordandesign.com/testing/wp-content/uploads/2015/08/diary.png">
						  </div>
						  <div class="category-grid">
 <?php query_posts('cat=3&showposts=3'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 <?php the_post_thumbnail( 'bones-thumb-240' ); ?>
									<h2 class="cat-grid-entry-title" style="text-align: center; width: 100%; margin-top:0.7em;"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
									  <?php echo ShortenText(get_the_title()); ?></a></h2>
<?php endwhile; endif; ?>

</div>

<div class="grid-head">
						  <img src="https://katejordandesign.com/testing/wp-content/uploads/2015/08/fiction.png">
						  </div>
						  <div class="category-grid">
 <?php query_posts('cat=6&showposts=3'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php the_post_thumbnail( 'bones-thumb-240' ); ?>
									<h2 class="cat-grid-entry-title" style="text-align: center; width: 100%; margin-top:0.7em;"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
									  <?php echo ShortenText(get_the_title()); ?></a></h2>
<?php endwhile; endif; ?>

</div>

And you can see it for yourself here: https://katejordandesign.com/testing/
I’ve never coded grids like this before as usually it’s a simple recent posts grid, so any suggestions would be fantastic. Thank you!

[bump removed]