Display wp posts horizontally doesn't work in archive template

Question

I'm trying to display my posts horizontally, but I have not managed to get it, it only shows vertically, I see that parts of the html code are repeated.

My code:

<div id="content" class="container-fluid">
    
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div id="four-columns" class="grid-container" style="display:block;">
<ul class="rig columns-4">
<li itemscope="">
<a href="<?php the_permalink(); ?>"><img src="<?php
$feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
echo $feat_image;?>" class="attachment-single-post-thumbnail size-single-post-thumbnail wp-post-image" alt="" width="300" height="188">
<h3 itemprop="headline"><?php the_title_attribute(); ?></h3></a></li></ul>
</div>  

<?php endwhile; endif; ?>
</div>

My css:

<style>
ul.rig li img {
  border-radius: 6px;
}
    
.mg-breadcrumb-section .overlay {
  display: none;
}
    
img, ul.rig li img {
  max-width: 100%;
  height: auto;
}
ul.rig li h3 {
  margin: 0 0 5px;
  text-align: center;
}
    
    #front-list ul li {
  list-style: square;
}
    
#front-list ul, ul.rig li {
  margin-bottom: 15px;
}   
ul.rig.columns-4 li {
  width: 16%;
}
ul.rig li {
  margin-right: 10px;
  background: #ddd;
  font-size: 16px;
  border-radius: 6px;
}
.footer3, ul.rig li {
  display: inline-block;
}

</style>

This is how it shows up in the browser

what am I doing wrong?