Align divs horizontally with rails generated loop

Question

I'm trying to lay out a list of blog posts horizontally. But I don't know how. I was able to achieve the result i wanted using css flexbox when creating the static mockup, but as soon as I replace the placeholder tags with rails loop, the layout breaks and all posts line up vertically. Also, Below the end of the last post, theres this string of texts with all the posts information floating at the bottom(see attached photo), not sure what i did wrong here.

Below are my html and css setup:

  <section id="posts" class="wrapper">
    <h2>My Latest Articles</h2>
    <hr>

    <div class="post_container">
      <div class="article">
        <%= @posts.each do |p| %>
        <h3 class="post_title"><%= link_to p.title, p %></h3>
        <p class="post_date"><%= p.created_at.strftime("%A,%b %d") %></p>
        <p class="content"><%= truncate(p.content, length: 400)  %></p>
        <% end %>
      </div>
    </div>

CSS

#posts {
    padding: 6.5em 0 10em 0;
    h2 {
        text-align: center;
        color: $text;
        margin-bottom: 1.25rem;
    }

    .post_container {
        padding: 6em 0 6em 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        .article {
            max-width: 28%;
        }
        .post_title {
            color: $text;
      font-size: 1.6em;
        }
        .post_date {
            padding: .75rem 0;
            color: $accent;
            font-size: 1.2em;
        }
        .content {
            color: $grey;
        }
    }
}

Answer 1

To remove the string of information below the posts, you need to modify your erb code.

Change the post_container div to this:

<div class="post_container">
  <div class="article">
    <% @posts.each do |p| %>
      <h3 class="post_title"><%= link_to p.title, p %></h3>
      <p class="post_date"><%= p.created_at.strftime("%A,%b %d") %></p>
      <p class="content"><%= truncate(p.content, length: 400)  %></p>
    <% end %>
  </div>
</div>