Bottom Border To Separate Posts on Homepage – CSS Issues

On my page, there are dotted horizontal lines but only the top post has it actually showing on the bottom of the post. The rest of the bottom border lines are at the bottom of the css content wrapper.

What am I doing wrong to separate each post with a bottom border?

my site: https://www.mark-pimentel.com

Currently, I’m using this code for my CSS

#post .post-fix {
  border-bottom: 1px dotted #999999;
  padding: 20px 20px;
}

and here is the code for my index.php file:

<div id="post-wrapper">

<div id="post">

    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>  

<div class="post-fix">

    <BR /><h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1><BR />
    <h4><?php the_time('F j, Y'); ?> at <?php the_time('g:i a'); ?> | <?php the_category(', '); ?></h4> <BR />

<div id="thumbnail"><div class="align-right"><?php $postimageurl = get_post_meta($post->ID, 'Thumbnail', true); if ($postimageurl) { ?>
<div class="postimage"><img src="<?php echo $postimageurl; ?>" alt="" width="150" height="150" /></div></div>
<?php } ?>

 </div>

    <h3><?php the_content('Read on...'); ?></h3>

</div>

    <?php endwhile; else: ?>  

 </div>
</div>