each文をWebサイトにて横並びに表示させたい

前提

each文で投稿するコードを書いています

実現したいこと

ここに実現したいことを箇条書きで書いてください。
・トップページに投稿した物を横並びに表示させたい。

発生している問題・エラーメッセージ

2回目以降の投稿から指定しているクラス名が付与されなくなる

該当のソースコード

<div class='item-contents'> <% @posts.each do |post| %> <div class="col-md-4"> <li class='list'> <%= post.user.nickname %> <%= link_to post_path(post.id) do %> <div class='item-img-content'> <%= image_tag post.image.variant(resize: '500x500'), class: "post-img" if post.image.attached? %> </div> <td> <div id="star-rate<%= post.id%>"> </td> <script> $('#star-rate<%= post.id %>').empty(); $('#star-rate<%= post.id%>').raty({ size : 36, starOff : '<%= asset_path('star-off.png') %>', starOn : '<%= asset_path('star-on.png') %>', half : false, readOnly: true, score: <%= post.star %>, }); </script> </div> <div class='post-info'> <h3 class='post-name'> <%= post.name %> </h3> <div class='post-price'> <span><%= post.rebyu %><br><p>映画ジャンル</p><%= post.category.name %></span> <div class='star-btn'> </div> <li> <%= link_to 'コメント', post_path(post.id), method: :get %> </li> <% if user_signed_in? && current_user.id == post.user_id %> <li> <%= link_to '編集', edit_post_path(post.id), method: :get %> </li> <li> <%= link_to '削除', post_path(post.id), method: :delete %> </li> <% end %> </div> </div> </div> <% end %> </li> </div> <% end %> </div>

試したこと

divで囲んでいる、親要素、子要素にミスがあると思い,
each文の外にdiv要素を書いたりしたが、結果は変わらなかった。
item-contentsにdisplay: flex;を付与しているが最初に投稿した物にしか効果が付与されず、
2回目以降に投稿した物には付与されない。
検証ツールで調べた所、1回目の投稿にしかitem-contentsクラスが付与されていないことがわかった。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。