Edit the display of most popular items on my homepage - css

Question

Currently trying to display 8 of the most popular items in from my shop on the home page in a list (ul, li) form. Problem is, it's not displaying inline. Looks horrible and I can seem to get any of the CSS to change it or rearranging the php code isn't working either. Was wonder if anyone had an insight into what I'm missing here.
Here's the php code:
<div id="popular-items" class="site-content">
<div id="popular-links" class="site-content">
<ul class="popular-list">
<li>
<div class="popular-im">
<?php
$args = array( 'post_type' => 'product', 'stock' => 4, 'posts_per_page' => 8, 'orderby' =>'date','order' => 'DESC' );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); global $product;
?>
<a id="id-<?php the_id(); ?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="65px" height="115px" />'; ?>
<h5><?php the_title(); ?></h5>
<span class="price"><?php echo $product->get_price_html(); ?></span></a><?php woocommerce_template_loop_add_to_cart( $loop->post, $product ); ?>
<?php endwhile; ?>
</div>
</li><!-- /span3 -->
</ul><!-- /row-fluid -->
</div>
</div>
And here's the css:
#popular-items {
height: 520px;
background-color: transparent;
border: 1px solid #fd0e35;
position: relative;}
ul.popular-list {
display: inline-block;
list-style-type: none !important;
padding: 0;}
#popular-links {
height: 400px;
width: 1102px;
background-color: transparent;
border: 2px solid lightgreen;
position: relative;
top: 50px;
margin: 0 auto;
padding: 0;}
.popular-im {
left: 400px;
height: 350px;
width: 150px;
margin: 0 0 0 0;
border: 2px solid black;
display: inline-block;
vertical-align: top;
position: relative;
text-transform: none;}

Answer 1

Remove Inline-block from UL and apply it to LI, Below should be ideal code for your problem, with explanation, change height / width as per your layout.
First you may want to highlight area what is popular items and let me guess it is about 600px width.
#popular-list {padding:10px; box-sizing:border-box; width:600px;}
Now let us define UL
ul.popular-list {list-style:none}
Finally Li setup in columns. (with 10px gutter between them)
ul.popular-list li {display:inline-block; width:142.5px; margin-right:10px}
ul.popular-list li:nth-child(4n+4) {margin-right:0}
And right after last li (just before ) put clear class.
Thanks & Regards
Manoj Soni

Answer 2

Something like that will help:
.popular-list{
list-style-type: none;
overflow:hidden;
}
.popular-list li{
display:inline-block;
float:left;
height: 350px;
width: 150px;
}