投稿の中に、次の投稿が表示されてしまうエラー

お世話になっております。

簡易的な投稿サイト（web application）を作成しており、タイトルのように一つのアカウントが複数投稿すると、一つ目の投稿の中に二つ目の投稿が、二つ目の投稿の中に三つ目の投稿が、三つ目の投稿の中に四つ目の投稿が表示されていきます。

以下写真です。

このエラーを解決して縦にどんどん表示していきたいのですが、どのようにすれば良いか検討がつかずご相談させて頂きました。。

以下　コードです。

posts/show.html.erb

<div class="main posts-show">
<div class="container">
    <div class="posts-show-item">
     <div class="post-user-name">
     <%= image_tag  "/#{@user.image_name}" %>
     <%= link_to(@user.name, "/users/#{@user.id}") %>
        </div>
      <p>
      <%= @post.content %>
      </p>
      <div class="post-time">
      <%= @post.created_at %>
      </div>
       <% if Like.find_by(user_id: @current_user.id, post_id: @post.id) %>
         <%= link_to("/likes/#{@post.id}/destroy",{method: "post"}) do %>
          < span class= "fa fa-heart like-btn-unlike"></span>
          <% end %>
      <else>
      <%= link_to("/likes/#{@post.id}/create",{method: "post"}) do %>
           <span class= "fa fa-heart like-btn"></span>
           <% end %>
      <% end %>
           
           <%= @likes_count %>
       <% if @post.user_id == @current_user.id %>
      <div class="post-menus">
       <%= link_to("応援を強化する", "/posts/#{@post.id}/edit") %>
       <%= link_to("応援をやめちゃう", "/posts/#{@post.id}/destroy", {method: "post"}) %>
       </div>
       <% end %>
       

    </div>
  </div>

posts/index.html.erb

<div class= "main posts-index">
 <div class="container">
   <% @posts.each do |post| %>
      <div class= "posts-index-item">
    <div class= "post-left"> 
       <%= image_tag "/#{post.user.image_name}" %>
       </div>
        <div class="post-right">
         <div class="post-user-name">
          <%= link_to(post.user.name, "/users/#{post.user.id}") %>
          </div>
        <%= link_to(post.content, "/posts/#{post.id}") %>
      </div>
      </div> 
   <% end %>
 </div>
</div>

posts.scss

/* posts/index ================================ */
.posts-index-item {
    padding: 20px 30px;
    background-color: white;
    overflow: hidden;
    box-shadow: 0 2px 6px #c1ced7;
  }
  
  .post-left img {
    width: 50px;
    height: 50px;
    border-radius: 40%;
    box-shadow: 0 2px 6px #c1ced7;
    object-fit: cover;
  }
  
  .post-user-name a {
    font-weight: 600;
  }
  
  .post-user-name a:hover {
    color: #3ecdc6;
  }
  
  .post-left {
    float: left;
  }
  
  .post-right {
    float: left;
    width: 90%;
    padding-left: 25px;
    text-align: left;
  }
  
  /* posts/show ================================ */
  .posts-show form {
    display: inline;
  }
  
  .posts-show-item {
    padding: 30px;
    background-color: white;
    box-shadow: 0 2px 6px #c1ced7;
    overflow: hidden;
  }
  
  .posts-show-item img {
    width: 60px; 
    height: 60px;
    border-radius: 40%;
    box-shadow: 0 2px 6px #c1ced7;
    vertical-align: middle;
    object-fit: cover;
  }
  
  .posts-show-item .post-user-name a {
    vertical-align: middle;
    font-size: 24px;
    margin-left: 15px;
  }
  
  .posts-show-item p {
    font-size: 24px;
    margin: 20px 0;
  }
  
  .post-time {
    color: #8899a6;
    margin-bottom: 10px;
  }
  
  .like-btn {
      color:#8899a6;

  }

  .like-btn-unlike{
      color:#ff2581;

  }

  .posts-show-item .fa{
      font-size: 16px;
      margin-right: 3px;
  }

  
  .post-menus {
    float: right;
  }
  
  .post-menus a, .post-menus input {
    color: #8899a6;
    text-decoration: underline;
    font-size: 14px;
  }
  
  /* posts/new ================================ */
  .posts-new textarea {
    font-size: 20px;
    padding: 10px;
    min-height: 140px;
    border: 1px solid rgb(216, 218, 223);
    resize: none;
  }
  
  .posts-new textarea::-webkit-input-placeholder {
    font-size: 24px;
    opacity: 0.5;
  }

宜しくお願い致します

その他必要な補足等ありましたら、仰って頂ければと思います