本番環境だとレイアウトが崩れる現象を解決したい

Question

#解決したいこと
現在、Ruby on Rails　６　を使用しております。
本番環境にはHerokuでデプロイをしております。
現在、rails　でFullCalendarを導入し、ローカルホストで確認をしたところ、正常に表示がされておりました。
しかし、本番環境にデプロイをし確認をしたところ以下のように表示が崩れておりました。
この現象を解決していただきたいです。

本番環境
ローカル環境

#行ったこと

本番環境上でアセットパイプラインを通るように、ターミナルで以下の行動を入力
rake assets:precompile RAILS_ENV=production

production.rbのファイルにある
config.assets.compile = false　の記述を、
config.assets.compile = true　に変更

するも、解決に至りませんでした。
Heroku上で動作する環境の仕様やアセットパイプラインの挙動が異なるためかと思い、上記の操作を行いましたが、変わらずでした。

#自身のコード
現在はまだ、ユーザー登録を行うためにdeviseのインストールを行い、設定したことと、FullCalendarを表示させていることしか行っておりません。

eventsコントローラーのindexコードには、

<div id='calendar'></div> の記述のみしか行っておりません。

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';

document.addEventListener('turbolinks:load', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new Calendar(calendarEl, {
    plugins: [ dayGridPlugin, interactionPlugin ]
  });

  calendar.render();
});

何か他に確認すべきことなどございましたら教えていただけると幸いでございます。

Answer 1

この辺は追加した認識で大丈夫ですか？

app/assets/javascript/application.js
//= require jquery
//= require moment
//= require fullcalendar

app/assets/stylesheets/application.css
...
*= require_tree .
*= require_self
*= require fullcalendar
*/

Comments

[ryuya1204]

ご回答いただきありがとうございます！
コメントいただきましたようにCSSファイルに追記できておりませんでした。
大変ありがとうございました！