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クラスが付与されていないことがわかった。