Display wp posts horizontally doesn't work in archive template - wordpress

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?