How can i add margin on container-fluid without breaking the responsivness

I want to add some margin on the container-fluid but when i do that then i get
horizontall scrollbar and the grid is broken.How can i do this without other side effects?

<div class="container-fluid">
    <div class="row">
      <div class="col-md-3 d-flex align-items-center justify-content-center">
        <mat-form-field class="choose-appointment-date" appearance="fill">
          <mat-label>Choose an appointment date</mat-label>
          <input matInput [matDatepicker]="picker" [min]="minDate" (dateChange)="getSelectedDate($event)"
            class="form-control" [formControl]="appointment_date" disabled>
          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker touchUi #picker disabled="false"></mat-datepicker>
        </mat-form-field>
      </div>
  
      <div class="col-md-9" *ngIf='availavable_appointment_hours_test'>
        <h3 *ngIf='availavable_appointment_hours_test.length'>Availavable termins for: {{ selected_appointment_date }}
        </h3>
        <h3 *ngIf='!availavable_appointment_hours_test.length' class='red'>There are not availvable dates for:
          {{ selected_appointment_date }}</h3>
        <div class="row">
          <div class="card col-lg-2 make-appointment-card" *ngFor="let hour of availavable_appointment_hours_test">
            <div class="card-body" (click)="selectAppointmentHour(hour)">
              <div class='text-center'>{{ hour.value }} </div>
            </div>
          </div>
        </div>
      </div>
    </div>

</div>
.container-fluid {
margin: 50px !important;
}

Source: Angular Questions