家計簿のアプリケーションでカレンダーにうまく収支を出力させたい

Question

前提・実現したいこと

①simple_calendarのgemを導入し、
②application.cssに、*= require simple_calendar の記述
③rails g simple_calendar：viewsコマンドにてカレンダーの見た目を整える

ここまで終わり、出力はされるが、要素が左に寄り、不格好。
先ほどまではhttps://gyazo.com/301bbdccc6380da6db0befc495ed3b4a
のような見た目だったが、急に変化した。(何かを消してしまったのか？)
現在はhttps://gyazo.com/0bf9bbb3f3514a75b2885fae3d442e2dのような見た目。

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

エラーメッセージ

該当のソースコード

<div class="center-content">
        <% if user_signed_in? %>
        <div class="title"><%= current_user.name %>さんの収入</div>
        <% end %>
          <div class="post-list-content">
            <% @incomes.each do |income| %>
              <ul class="post-list">
                <li class="post-list-data-date"><%= income.date %></li>
                <ul>
                  <li><%= link_to '詳細', income_path(income.id), class:"link_pass" %></li>
                  <li><%= link_to '編集', edit_income_path(income.id), class:"link_pass" %></li>
                  <li><%= link_to '削除', income_path(income.id), class:"link_pass", method: :delete %></li>
                </ul>
                <li class="post-list-data"><%= income.category %></li>
                <li class="post-list-data"><%= image_tag 'money.png', size: '50x50' %>¥<%= income.price %></li>
              </ul>
            <% end %>
          </div>
      </div>

まずこのビューから<li><%= link_to '詳細', income_path(income.id), class:"link_pass" %></li>
詳細ページ(カレンダーのページへ飛ぶ)

def index
    @income = Income.includes(:user).order(date: "ASC")
    @spending = Spending.includes(:user).order(date: "ASC")
    @spendings = Spending.where(date: Time.now.beginning_of_month..Time.now.end_of_month).includes(:user).order(date: "ASC")
    @incomes = Income.where(date: Time.now.beginning_of_month..Time.now.end_of_month).includes(:user).order(date: "ASC")
    @spending_sum = @spendings.sum(:price)
    @income_sum = @incomes.sum(:price)
    @expense_sum = @income_sum - @spending_sum
    @spending_data = Spending.all.where(date: Time.now.beginning_of_month..Time.now.end_of_month)
  end

  def new
    @income = Income.new
  end

  def create
    @income = Income.new(income_params)
    if @income.save
      redirect_to root_path
    else 
      render :new
    end
  end

  def show
    @income = Income.find(params[:id])
    @spending = Spending.includes(:user).order(date: "ASC")
  end

  def edit
    @income = Income.find(params[:id])
  end

コントローラーのshowアクションを通り、

<%= render "shared/header" %>
<div class="calendar-content">
  <%= month_calendar events: @spending do |date, spending| %>
    <%= date.day %>

    <% spending.each do |spending| %>
      <div class="calendar-category">
        <%= spending.category %>
        -<%= spending.price %>
      </div>
    <% end %>
  <% end %>
</div>

ビューにいく流れである。

試したこと

• calendar-contentのcssのwidth,heightを100%にする

→変化なし

• calendar-categoryのcssのwidth,heightを100%にする

→要素だけ大きくなり幅がめちゃくちゃになります
https://gyazo.com/e4524c80c1eb99d77388182a20773a20

そもそもsimple_calendarのgemを導入し、rails g simple_calendar：viewsコマンドを入れると
ある程度の型ができ、最初はこのようになりました
https://gyazo.com/301bbdccc6380da6db0befc495ed3b4a

何かの手違いで消してしまったりしているのでしょうか？
それとも他に原因が考えられるでしょうか？

初心者ですがどなたかご教示よろしくお願いします。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

application.cssにsimple-calendarのtableの設定の記述があったのですが、これが消えていたためエラーが起きていました。

.simple-calendar table{-webkit-border-horizontal-spacing:0px;-webkit-border-vertical-spacing:0px;background-color:transparent;border:1px solid #dddddd;border-collapse:collapse;box-sizing:border-box;max-width:100%;width:100%}.simple-calendar tr{border-collapse:collapse}.simple-calendar th{padding:6px;border-bottom:2px solid #dddddd;border-collapse:collapse;border-left:1px solid #dddddd;border-right:1px solid #dddddd;border-top:0px none #333333;box-sizing:border-box;text-align:left}.simple-calendar td{padding:6px;vertical-align:top;width:14%;border:1px solid #ddd;border-top-color:#dddddd;border-top-style:solid;border-top-width:1px;border-right-color:#dddddd;border-right-style:solid;border-right-width:1px;border-bottom-color:#dddddd;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#dddddd;border-left-style:solid;border-left-width:1px}.simple-calendar .day{height:80px}.simple-calendar .today{background:#FFFFC0}.simple-calendar .prev-month{background:#DDD}.simple-calendar .next-month{background:#DDD}.error-alert{display:flex;justify-content:center;margin-bottom:5vh}.error-message{font-size:1.3vw;list-style:square;color:#b63000}body{position:relative;min-height:100%}.footerFixed{min-height:100vh;position:relative;padding-bottom:40px;box-sizing:border-box}.post-content-parent{height:100%}.post-content{width:100vw;display:flex;height:100%}.post-list{border:3px solid #20b2aa;width:47%;height:150px;margin:5px}.post-list-data{text-align:center;line-height:40px}.post-list-data-date{border-bottom:2px solid #eee;text-align:center;background-color:#eee}.post-list-data-good{margin-left:45px}.post-list-data-bad{margin-right:45px}.left-content{width:30vw;height:100vh;border:3px solid #eee;border-top:transparent;overflow:scroll}.post-list-content{width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.title{font-size:20px;text-align:center;width:100%;margin-top:5px;border-bottom:3px solid #eee;text-decoration:none;height:50px;display:flex;align-items:center;justify-content:center}.post-user-name{text-decoration:none}.center-content{width:30vw;height:100vh;border:3px solid #eee;border-top:none}.post-list{position:relative;overflow:hidden}.post-list .post-list-data-date{filter:blur(0);transition:.0s}.post-list-data-date:hover .post-list{filter:blur(15px);transition:.7s}.post-list ul{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;width:100%;height:100%;transform:scale(0);transition:.0s;opacity:0;background-color:#20b2aa;padding:10px;box-sizing:border-box}.post-list:hover ul{transform:scale(1);transition:.7s;opacity:1}.post-list ul li{border-bottom:1px solid #999}.post-list ul li:first-child{border-top:1px solid #999}.post-list ul li .link_pass{display:block;background:url(arrow.png) no-repeat 8px center;background-size:3px auto;padding:10px 0 10px 16px;text-decoration:none;transition:.3s;color:#000}.post-list ul li:hover .link_pass{background-color:rgba(255,255,255,0.9)}@media screen and (max-width: 640px){.post-list:hover .post-list-data-date{filter:blur(0)}.post-list-data-date a:hover .post-list{opacity:.5}.post-list ul{display:none}}.right-content{width:40vw;height:100%;border:3px solid #eee;border-top:transparent;border-bottom:transparent;position:relative}.right-content-upper{height:60%;width:100%;margin:50px 0 0 85px}.right-content-bottom{width:100%;height:40%;margin-top:150px}.spending-sum{width:100%;height:50px;background-color:#eee;margin:10px 0;text-align:center;border:1px solid white;padding-top:12px}.income-sum{width:100%;height:50px;background-color:#eee;text-align:center;border:1px solid white;padding-top:12px}.expense-sum{width:100%;height:50px;background-color:#eee;text-align:center;border:1px solid white;padding-top:12px}.form-wrap{width:100%;height:100%;align-items:center}.form-header{width:100%;height:100px;text-align:center;font-size:20px;display:flex;justify-content:center;align-items:center;border-bottom:1px solid white}.form-header-text{border-bottom:5px solid #eee}.post-income-text{text-decoration:none;color:black}.form-content{height:100vh;width:100%;margin:auto}.form-date{height:100px;width:100vw;text-align:center;margin-top:10px}.control-label{font-size:20px}.form-control{font-size:20px}.form-category{height:100px;text-align:center;width:100vw;margin-top:10px}.upper-form{height:100px;width:70%;margin:0 auto 0 auto}.lower-form{height:100px;width:70%;margin:0 auto 0 auto}.form-letter{font-size:20px}.form-price{height:100px;width:70vw;text-align:center;margin:200px auto 50px auto;padding-top:30px}.price-input{height:50px;width:20%;text-align:right;padding-right:10px;font-size:130%;border:5px solid #eee}.income-yen{font-size:20px}.form-memo{height:200px;text-align:center;margin:2px auto 10px auto;width:80%;padding-top:30px}.memo-input{height:70px;width:50%;font-size:120%;border:5px solid #eee}.income-memo{font-size:20px;margin:10px;height:10px}.form-submit{height:60px;width:100vw;text-align:center;margin:2px auto 0 auto;background-color:white}.submit-red-btn{height:50px;width:120px;background-color:#eee;border:3px solid white;text-decoration:inherit;background:#20b2aa;box-shadow:0 6px 0 #047c71,0 12px 0 rgba(0,0,0,0.2);transition:color .3s, background .3s, box-shadow .3s, transform 0.3s}.btn:hover{background:#3cc4bd;box-shadow:0 3px 0 #12978d,0 6px 0 rgba(0,0,0,0.2);transform:translateY(3px)}.submit-red-btn:active{color:#ddd;background:#12978d;box-shadow:0 0 0 #047c71,0 0 0 rgba(0,0,0,0.2);transform:translateY(6px);transition-duration:.1s}.field_with_errors{display:contents}/*!