在我的自定义WordPress主题帖子中，呈现效果并不完美。也许有css的问题，但我不知道。

我已经添加了index.php. 请看一看。

<?php get_header(); ?>

<div id="primaryContent" class="content-area">
<main id="main" class="container site-main" role="main">
<?php if(have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post_box">
<div class="post_title"> <h2> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a></h2> </div> <!--end of post title-->

<div class="post_thumb">
<?php
if (has_post_thumbnail() )
{
    the_post_thumbnail();

}
?>
</div> <!-- end of post thumb-->

<div class="post_content">
<?php echo substr(get_the_excerpt(), 0 , 200); ?> </br>
<a href="<?php the_permalink();?>" class="read_more"> Read more </a>
</div> <!-- end of post content-->

<?php endwhile; else: ?>
<p> No Post Found </p>

<?php endif; ?>

</div> <!-- end of post box -->

</main>
</div><!-- .content-area -->
 <?php get_footer(); ?>

#primaryContent
 {
 Clear:both;
 }
  .post_box
  {
   width:700px;
   min-height:220px;
   border:1px solid;
   margin : 5% 0 5% 0;  
  }
  .post_title
  {
   margin-top:10px;
   margin-top:10px;
   color:#000000;
   } 
  .post_title h2 
   {    
    text-align:center;
    text-decoration:none;
    color:#000000;
    }
  .post_title h2 a
  {
    color:#000000;
   }  
   .post_title h2 a:hover
   {
   text-decoration:none;
   }
   .post_thumb
   {  
   float:left;
   width:180px;
   height:140px;
   margin-left:10px;
   }
  .post_thumb img {
   width:100%;
   height:100%;
   border:1px solid #cccccc;
   padding:5px;
   }
  .post_content
   {
   float:left;
   width:400px;
   border :1px solid #000000;
   margin-left:25px;
   min-height:100px;
   margin-top:5%
   }
  .read_more
  {
   background:#0E5198;
   color:#ffffff;
   padding:5px 10px;
   text-decoration:none;
   margin-top:12%;
   float:right; 
  }

有2个帖子时的图像Image when there are 2 posts

请帮我解决这个问题。提前感谢