ワードプレスにて投稿記事の一覧を作成したものの、縦表示になり横並びにできません・・・

知り合いにHPを作て欲しいと頼まれて、ワードプレスを1から勉強しつつ作成しています。
昔HTMLでの作成経験はあり、VBAのプログラミングはできますが、PHPやCSSは初めて触っています。

投稿で商品の写真と価格などをカスタムフィールドテンプレートで入力し、その投稿記事一覧を作ろうとしているところです。
一覧自体は問題なく作成できたのですが、縦表記になってしまい横にできません。

下記のコードがそれですが、調べたやつをコピペしつつ修正した程度なので見にくいと思います・・・。
このコードの実行例では記事が縦ではなく横になっています。
今のところ一覧自体は作成できるのですが1カラムの縦表記になってしまいます。
それを5カラム程度にしたいといろいろ試しているのですがなかなかうまくいきません。

テーマは無料のlightningです。

<?php
$posts = get_posts(array('category_name' => '×××','showposts' => '30','order' => 'ASC'));
global $post;
if($posts){  foreach($posts as $post){ setup_postdata( $post );?>
  <a href="<?php the_permalink(); ?>">

<?php
if(mb_strlen($post->post_title, 'UTF-8')>8){
	$title= mb_substr($post->post_title, 0, 8, 'UTF-8');
	echo $title.'…';
}else{
	echo $post->post_title;
}
?>
	</a><BR>
	<?php echo wp_get_attachment_image(get_post_meta($post->ID,"画像",true),'thumbnail'); ?><BR>
	<?php echo get_post_meta($post->ID, 'サイズ', true); ?><BR>
	<?php 
		$price = get_post_meta($post->ID, '価格', true);
	if(empty($price)){
		echo "価格未定";
	}else{
		echo number_format($price) ,"円";
	}
	?><BR>

	<?php 
		$birthday = get_post_meta($post->ID, '入荷日', true);
	if(empty($birthday)){
		echo "入荷日不明";
	}else{
		echo $birthday ,"入荷";
	}

?><BR>

<?php }} ?>

自分なりにいろいろ調べてみて

<div class="col-1-3"> <div class="col-sm-3 col-xs-6"> display: inline-block などのやり方を見つけて試してみたのですが、どれもうまくいきませんでした。 lightningのテーマがまずいのかと思いTwenty Twentyで試してみましたが解決しませんでした。

仕方なくプラグインのWP Show Postsを使用しているのですが、カスタムフィールドで入力した値を表示できないので、何とか解決できたらと思っています。

良いお知恵を拝借できないでしょうか。
よろしくお願いします。