隙間が埋まらない (css)

概要

1.showページにボタンを縦に並ばせています。

2.ログアウト時のボタンはきれいに並んでいます。

3.ログイン時のボタンの並びはお気に入りボタンの上下に隙間があります。

4.positionやmargin,paddingなどで隙間を埋めてみたがお気に入りボタンをクリックした後に表示されるお気に入り解除ボタンがずれる

5.ボタン同士の隙間を探してみたが、どこの要素の隙間なのかが分からなかった。

6.ログアウト時とログイン時のボタン箇所のコードは少し違う

実現したいこと

1.ボタンの間にある隙間を埋めて縦に並べたい

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

・ログアウト時

。ログイン時

該当のソースコード

plans/show.html.erb/ログイン時

<%# 他人の掲載 %> <div class='plan-content'> <%if @plan.end_on < Date.today %> <div class="finish-text"> <h5>こちらの掲載は終了しました。</h5> </div> <% end %> <div class="plan-header"> <div class="plan-user"><h3><%= link_to @plan.user.name, user_path(@plan.user)%></h3></div> <div class="plan-time"><p>掲載期間：<%= @plan.start_on.strftime('%Y年%m月%d日') %>～<%= @plan.end_on.strftime('%Y年%m月%d日') %></p></div> </div> <div class="plan-title"> <h4>～企画内容～</h4> <div class="plan-title-name"><h5><%= @plan.title %></h5></div> </div> <div class="plan-overview"> <div class="plan-photo"><p><%= image_tag @plan.photo.url, :alt => '企画書イメージ図' if @plan.photo? %></p></div> <div class="plan-detail"> <h4>企画概要</h4> <p><%=safe_join(@plan.detail.split("\n"),tag(:br))%></p> </div> </div> <div class="sub-plan-content"> <div class= "plan-conditions"> <h4>希望条件</h4> <p class="plan-show-conditions"><%=safe_join(@plan.conditions.split("\n"),tag(:br))%></p> </div> <div class= "plan-number"> <h4>電話番号</h4> <p><%= @plan.user.telephone_number %></p> </div> <div class= "plan-address"> <h4>所在地</h4> <div class="plan-adress-overview"> <p>〒<%= @plan.user.post_code %></p><br /> <p class="adress-content"><%= @plan.user.address %></p> </div> </div> </div> ---------------------ボタン箇所-------------------------------------------------------------- <div class="plan-content-btn"> <div class="plan-favorite-btn"> <p><%= render 'favorites/favorite_button', plan: @plan %></p> </div> <% unless @plan.end_on < Date.today %> <% if @isRoom == true %> <% if @alreadyRoom == true%> <div class="plan-message-btn"> <p class="btn btn-danger btn-lg"><a href="/rooms/<%= @roomId %>" class="plan-message">メッセージ</a> </div> <% end %> <% else %> 　<% if @alreadyRoom == false%> <%= form_for @room do |f| %> <%= fields_for @entry do |e| %> <%= e.hidden_field :plan_id, value: @plan.id %> <%= e.hidden_field :user_id, value: @plan.user.id %> <% end %> <div class="plan-entry-btn"> <%= f.submit "応募", class:"btn btn-outline-danger btn-lg" %> </div> <% end %> <% end %> <% end %> <% else %> <% end %> <div class="plan-content-btn"> <%= link_to '戻る', :back, class:"btn btn-outline-danger btn-lg"%> </div> </div> ---------------------ボタン箇所-------------------------------------------------------------- </div>

plan.scss/plans/show.html.erb箇所

//企画掲載ページ(plans/show) .plan-content{ border-radius: 20px; height: auto; margin-left: calc(-50vw + 50%); width: 100vw; //企画掲載ページヘッダー箇所 .plan-header{ margin-bottom: 30px; border-bottom: solid 1px silver; height: 60px; .plan-user{ text-align: left; font-family: Arial; .plan-user h3 { width: 50%; font-size: 20px; } a { color: black; text-decoration: none; position: relative; left: 50px; } a:hover{ color: silver; } } .plan-time{ width: 100%; text-align: right; font-size: 12px; position:relative; bottom: 10px; right: 40px; } } .plan-title{ margin-top: 10px; margin-bottom: 10px; text-align: center; word-wrap: break-word; .plan-title-name{ height: 60px; margin-top: 20px; } } .plan-overview{ border-top: solid 1px silver; border-bottom: solid 1px silver; padding: 20px; display:flex; margin-left: auto; margin-right: auto; width: 95%; .plan-photo{ padding-right: 50px; } .plan-detail{ font-size: 20px; width: 73%; word-wrap: break-word; } } .sub-plan-content{ margin-left: 50px; border-bottom: solid 1px silver; width: 73%; .plan-conditions{ height: auto; padding-top: 20px; margin-bottom: 20px; display:flex; h4{ width: 50%; padding-right: 2%; } .plan-show-conditions{ width: 72%; word-wrap: break-word; } } .plan-number{ padding-top: 40px; margin-bottom: 20px; display:flex; h4{ padding-right: 19%;; } p{ } } .plan-address{ height: auto; padding-top: 20px; margin-bottom: 40px; word-wrap: break-word; display:flex; h4{ padding-right: 22%; } .plan-adress-overview{ } .adress-content{ } } } .plan-content-btn a{ display: block; } .plan-favorite-btn input{ width: 100%; } .plan-entry-btn input{ width: 100%; } .finish-text{ padding: 15px; margin-left: calc(-50vw + 50%); width: 100vw; text-align: center; background-color: silver; margin-top: -25px; margin-bottom: 25px; } }

試したこと

marginやpadding,positionで埋めてみたが、お気に入りボタンがクリック後ずれる

文書が拙かったり、まかせっきりに見えた文章でしたら、コメントで指摘していただいたら
修正させていただきます。