I am having a problem where my ng-bootstrap datepicker is being styled incorrectly. Please see the following image:

It looks like there is a large margin being applied to the right side of each of the class="ngb-dp-day"s where the resulting size is not correct, and therefore each column of days stacks vertically on top of each other.

I have looked through the element tree and cannot seem to find any classes that may receive leaking styles from other elements.

Any of the three ViewEncapsulation methods (None, Native, or Emulated) make a difference either. Same vertical stacking.

I am rendering the datepicker inside of a ng-bootstrap modal body. html below:

<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    ...
  </div>
  <div class="modal-body">
    <ngb-datepicker #dp [(ngModel)]="model.dateStruct" (navigate)="date = $event.next"></ngb-datepicker>
  </div>
  <div class="modal-footer">
    ...
  </div>
</ng-template>

Any more information I can provide?