Posts are not rendering perfectly on wordpress - css

Question

I am new to wordpress development . In My custom wordpress theme posts are not rendering perfectly may be there is css issue but i am not able to figure out .
I have added code of my index.php please have a look.
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> <?php the_title(); ?> </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>
Read more
</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(); ?>
CSS ->>
#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;
}
Images when there is only 1 post
Images when there is only 1 post
Image when there are 2 posts
Image when there are 2 posts
Please help me solve this issue. Thanks in advance