レイアウトについての相談です。

Question

現在blumaというフレームワークを使って、一覧を横並びにしたいのですがどうしても下記のようなレイアウトになってしまいます。

どのような記述にすればスッキリした見た目になるのでしょうか？
お詳しい方いらっしゃったらご教授ください

https://gyazo.com/82fa2accf92419302d95c35b4bc7578c

<div class="card">
<% @blogs.each do |blog|%>
  <div class="card-image">
    <%= link_to blog_path(blog) do %>
    <%= attachment_image_tag blog, :image %><br>
    <% end %>
  </div>
  <div class="card-content">
    <div class="media">
      <div class="media-content">
      <%= link_to blog.user.username,user_path(blog.user.id) %><br>
      <%= blog.updated_at.strftime("%Y-%m-%d %H:%M") %>更新<br>
      </div>
    </div>

     <% if current_user.already_favarited?(blog) %>
  <%= link_to  blog_favarites_path(blog), method: :delete do %>
    <i class="fas fa-heart"></i>
    <% end %>
  <% else %>
  <%= link_to  blog_favarites_path(blog), method: :post do %>
    <i class="far fa-heart"></i>
    <% end %>
  <%= blog.favarites.count %>
  <% end %>
<% end %> 

<div>

Comments

[K_3578]

ソースコードはMarkDownのcodeで提示しましょう。
```HTML
ソースコード
```
という形で上下をバッククォート3つで囲んでください。

[naUc]

スッキリした見た目ということですが、実現したいレイアウトを提示いただけるとアドバイスしやすいと思いますよ。レイアウトであればcssのコードもお願いします。

[m.ts10806]

感覚によるものだとアドバイス得られにくいと思います。
どこをどうしたいのか具体的に記載してください。

あと画像は外部サイトではなくteratailの画像投稿機能を使ってください。