FullCalendar table body width not overriding with !important

Question

I am putting my calendar using the FullCalendar library on a popup on a profile. The popup is functioning as well as the calendar. But the CSS is off. The width in the browser when I open up the console says 141 px. It looks like it was set as an inline styling CSS. I am trying to set it as 100% however. I managed to get the calendar header to be the right size but even when adding !important to my property it wouldn't override the CSS.

.fc-col-header { 
    width: 95% !important;
}

\\ This is the calendar body. I am sure that these elements are specific to the element I \\ am trying to change and I did check.
.fc-daygrid-body .fc-daygrid-body-unbalanced .fc-scrollgrid-sync-table {
    width: 95% !important;
}

\\ HTML

<div class="scheduleBtn btn btn-primary btn-lg nav-buttons" onclick="schedulePopup()">
          Schedule
          <p style="visibility: hidden;" id="all_events" data-url="{% url 'cal:all_events' %}"></p>
          <p style="visibility: hidden;" id="update" data-url="{% url 'cal:update' %}"></p>
          <p style="visibility: hidden;" id="add_event" data-url="{% url 'cal:add_event' %}"></p>
          <p style="visibility: hidden;" id="updateEvent" data-url="{% url 'cal:updateEvent' %}"></p>
          <div class="schedulePopup" id="schedulePopupId">
            <div class="row">
              <h4>Calendar</h4>
    
              <div class="col-md-12">
                <form
                  method="post"
                  style="margin-left: 250px; margin-bottom: 20px; margin-top: 30pxs"
                >
                  {% csrf_token %} {{ form.as_p }}
                  <input type="submit" value="Save" />
                </form>
                <div id="calendar"></div>
              </div>
              <div id="eventModal" class="modal fade" role="dialog">
                <div class="modal-dialog">
                  
                  <div class="modal-content">
                    <div class="modal-header">
                      <h4 class="modal-title">Event Details</h4>
                      <button type="button" class="close" data-dismiss="modal">
                        &times;
                      </button>
                    </div>
                    <div class="modal-body">
                      <form id="eventForm">
                        <div class="form-group">
                          <label for="modalTitle">Title:</label>
                          <input type="text" class="form-control" id="modalTitle" />
                        </div>
                        <div class="form-group">
                          <label for="dayStart">Day Start:</label>
                          <input type="date" class="form-control" id="dayStart" />
                        </div>
                        
                        <div class="form-group">
                          <label for="dayEnd">Day End:</label>
                          <input type="date" class="form-control" id="dayEnd" />
                        </div>
                        <div class="form-group">
                          <label for="timeStart">Time Start:</label>
                          <input type="time" class="form-control" id="timeStart" />
                        </div>
                        <div class="form-group">
                          <label for="timeEnd">Time End:</label>
                          <input type="time" class="form-control" id="timeEnd" />
                        </div>
                        <div class="form-group">
                          <label for="desc">Title:</label>
                          <input type="text" class="form-control" id="desc" />
                        </div>
                      </form>
                      <button
                        type="button"
                        id="removeBtn"
                        class="remove"
                        data-dismiss="modal"
                      >
                        Remove Event
                      </button>
                    </div>
                    <div class="modal-footer">
                      <button
                        type="button"
                        class="btn btn-default"
                        data-dismiss="modal"
                      >
                        Close
                      </button>
                      <button type="button" class="btn btn-primary" id="saveEvent">
                        Save changes
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            <!-- eventmodal end here -->
            </div>
          </div>
        </div>

I am adding a picture for reference.

Why is the width inline style 141px here? It shows as 1006px on the same calendar but on a different page with different styling and not on a popup.

<div class="fc-daygrid-body fc-daygrid-body-unbalanced " style="width: 141px;">
...
</div>

<div class="fc-daygrid-body fc-daygrid-body-unbalanced " style="width: 1006px;">
...
</div>