body {
}

/* DataTables (Bootstrap 4) generates its control rows (length menu, search, pagination)
   as Bootstrap .row elements, which carry negative horizontal margins (-15px). When the
   table is wrapped in a .table-responsive container (no padding) those margins aren't
   absorbed, so the controls overflow the table by 15px on each side and the block looks
   wider than the table. Neutralise the row margins and column padding so the controls
   align with the table. */
.table-responsive > .dataTables_wrapper > .row {
    margin-left: 0;
    margin-right: 0;
}

.table-responsive > .dataTables_wrapper > .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}