Unexpected list floating problems

I’m using a template to have one of my pages list the thumbnail, title, and link of all its child pages.

https://jensbaking.thewingedheart.com/menu/

Each list item is inline and floated left, but instead of making neat rows, one item seems to get caught and stuck on the right, forcing the rest of the items down to the next line. I’ve never had a strong grasp of inline/floating lists (and I don’t really know PHP), so it might just be a problem from my lack of understanding.

Here is my CSS:

ul.portfolio_box {
display: inline;
}

ul.portfolio_box li {
list-style: none;
display: inline;
width: 220px;
float:left;
margin: 7px;
}

.portfolio_caption {
text-align: center;
}

.portfolio_caption a {
letter-spacing: 1px;
font-weight: bold;
text-decoration:none;
}

and here is the PHP generating the list of sub-pages:

<ul class="portfolio_box">
		<!-- start of .post -->
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

			<?php
      $args = array(
	'post_parent' => $post->ID,
	'post_type' => 'page',
	'post_status' => 'publish',
	'order' => 'ASC',
	'orderby' => 'title',
	'numberposts' => 0
);
	 $postslist = get_posts($args);
     foreach ($postslist as $post) :
        setup_postdata($post);
     ?>

             <li>
		<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('pic-archive'); ?></a>
		<div class="portfolio_caption"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
             </li>

     <?php endforeach; ?>
			</ul>
             <div class="divider"> </div>
         </div>

		<!-- end of .post -->
		<?php endwhile; endif;?>

Thanks a bunch