rails erb内でのeach文が上手く表示されない

Question

前提・実現したいこと

当方railsにて掲示板のようなアプリを作成しております。
画面左の「参加する」ボタン押下でユーザーが特定のグループ（ボタンが配置してあるグループ）に参加する仕組みの実装している途中なのですが、グループ一覧の表示で行き詰りました。
DBのgroupテーブルからグループ名を抽出し、each文でグループ一覧を表示させたいです！

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

添付の画像を見ていただければイメージしやすいかと思うのですが、まずは全てのグループ名の横に「参加する」ボタンを表示したいです！（後々、ユーザーが参加しているグループに「参加中」、参加していないグループに「参加する」を配置する予定です）

該当のソースコード

groups/index.html.erb

<div class="Main">
  <%= render partial: 'layouts/group_index', locals: {groups: @groups} %>
</div>

layouts/_group_inde.html.erb

<div class="Main__left">
  <div class="Main__left__search">
    <div class="Main__left__search-squeeze">
      <form action="#" class="Main__left__search-squeeze-box">
        <input type="checkbox">
      </form>
      <p>参加中のグループに絞る</p>
    </div>
    <form action="#" class="Main__left__search-main"> 
      <input type="text" placeholder="グループを検索" class="Main__left__search-main-text">
      <input type="submit" value="検索" class="Main__left__search-main-btn">
    </form>
  </div>
  <div class="Main__left__group">
    <% groups.each do |group| %>  
      <div class="Main__left__group-name">
        <%= group.group_name %>
      </div>
      <div class="Main__left__group-text">最新テキスト</div>
      <div class="Main__left__group-time">2020/06/20</div>
      <%= link_to "参加する", join_group_path(group), class: 'Main__left__group-btn' %>
    <% end %>
  </div>
</div>

index.scss

&__group{
      height: 80px;
      border-bottom: solid 1px rgb(163, 161, 161);
      margin: 5px 0px 0px 5px;
      position: relative;
      &-name{
        font-size: 20px;
        color: rgb(90, 89, 89);
      }
      &-text{
        font-size: 15px;
        color: rgb(146, 145, 145);
      }
      &-time{
        font-size: 15px;
        color: rgb(146, 145, 145);
      }
      &-btn{
        background-color: rgb(107, 107, 107);
        text-decoration: none;
        color: white;
        height: 30px;
        width: 80px;
        line-height: 30px;
        text-align: center;
        border-radius: 5px;
        position: absolute;
        bottom: 3px;
        right: 3px;
      }
    }

Comments

[winterboum]

Main__left__group-btn　にどんなCSS設定してますか？

[ko_no]

画面左のグループに設定してあるcssを追記させていただきました！

Answer 1

CSSは弱いのですが,多分これですね

        position: absolute;
        bottom: 3px;
        right: 3px;

absoluteですから親の<div class="Main__left__group">に対する位置になります。
全てのボタンが同じ位置に重なってるのでしょう。
loopの中全体を<div>で囲って見てください

Comments

[ko_no]

いただいた回答通りにしたところ綺麗さっぱり解決しました！
本当にありがとうございました！！