Change the CSS to the most popular items on my homepage - css

Question

I've got a div that is displaying the most popular 8 items from the shop on the home page. But I can't figure out how to produces a margin between them and get the price and add to basket button to display below the image header. see image of what it looks like now here
Any suggestions?
Here's the php code:
<div class="popular-im">
<?php $args=a rray( 'post_type'=>'product', 'stock' => 4, 'posts_per_page' => 4, '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="190px" height="190px" margin="100px" />'; ?>
<span class="price"><?php echo $product->get_price_html(); ?></span>
</a>
<?php woocommerce_template_loop_add_to_cart( $loop->post, $product ); ?>
<?php endwhile; ?>
</div?
And the only css I have:
ul.popular-list li {
width: 1100px;
display: inline-block;
border: 2px solid black;
margin: 0px;
}

Answer 1

You've set the margin property on the list items to 0px. You need to specify what direction you want to "push" them in.
For example:
ul.popular-list li{
margin-right: 10px;
}
Will make each item push its neighbour 10px to the right (you might want to remove this effect on the last item, to make the spacing equal).
Can't give advice on moving the price etc. down without actual HTML to see, but setting something to display: block will automatically push it onto its own line.