datatable overflows container

leefa

https://ascentdashboard.neocities.org/

The datatable overflows the container

I'm using FixedHeader and it works great

I've tried adding scrollX:true, paging: true but then the headers and footers don't line up

I've tried adding a surrounding div with overflow-x: auto, but then the fixedHeader isn't aligned when scrolling to the right

using
* datatables 2.1.8
* fixedHeader 4.0.1
* bootstrap4

                    <div id="ForecastDIV" class="col majorSection " >
                        <div class="row">
                            <div class="col border border-success rounded20 mySection">
                                <h1 class="h1 mb-1 text-center  bg-primary">Forecast</h1>
                                <div class="mb-1 text-center  bg-warning w-100 budgetError"></div>
                                <table class="display table table-sm table-hover" id="tbForecastLabor" style="width:100%;font-size:.8rem">
                                    <thead ></thead>
                                    <tfoot class="text-white bg-dark "></tfoot>
                                </table>
                            </div>
                        </div>
                    </div>

          var table = new DataTable('#tbForecastLabor', {
                fixedHeader: true,
                stripeClasses: [],
//                paging: true,
//                scrollX:true,
                lengthMenu: [{label: 'All', value: -1}, 10, 25, 50],
                info: false,
                ordering: false,
                columns: columns,
                buttons: [
                    {extend: 'excelHtml5',title: title},
                    {extend: 'spacer'},
                    {extend: 'pdfHtml5',title: title}
                ],
                layout: {
                    topStart:null,topEnd: null,
                    bottom: null ,
                    top1: ['search', toolbar, 'buttons' ],
                },
                columnDefs: [

                    { className: "colBorderLeft", targets: borderColumns} ,
                ],
                rowGroup: {
                    dataSrc: 'costCode',

                    startRender: function (rows, group) {
                        var collapsed = !!forecastCollapsedGroups [group];
                        var colsL=columns
                        var cll=columns.length
                        var cl = ''
                        if ((collapsed)) cl = 'class="collapsed"'

                        var aCostRemaining= rows.data()
                            .pluck('CostRemaining');

                        var emp1 = rows.data().pluck('emp')[0]
                        var cnt = 0
                        if (emp1) {
                            cnt = rows.data().pluck('emp').length
                        }
                        var xx = '<th colspan="2">' + group + ' ('+cnt+')</th>'
                        var xx = '<th colspan="2" style="border-top: 2px solid  black ">' + group + '</th>'
                        if(group.substring(0,2)=='02'){
                            var x=''
                        }

                        var trE = $('<tr/>')
                            .append(xx)
                            .attr('data-name', group)
                        var dataL= data
                        for (var ci = 2; ci < columns.length; ci++) {
                            var col = columns[ci]
                            var title = col.name
                            var tot1 = 0, tot2 = 0
                            if (col.fullfield) {
                                title = col.fullfield
                            }
                            var sum = 0
                            var vals = rows.data().pluck(title)
                            if(group.substring(0,2)=='02' && ci==41){
                                var x=''
                            }
                            for (var vi = 0; vi < vals.length; vi++) {
                                var v = vals[vi]
                                if (v && !isNaN(v)) {
                                    var x = v.toString().replace(/[^0-9.-]+/g, "")
                                    var n = parseFloat(x)
                                    sum += n
                                }
                            }
                            if (sum == 0) sum = ''
                            if(title=='HoursRemaining'){
                                sum = formatValue(sum, 1, 'Number',1)
                            } else if (title=='CostRemaining' && sum) {
                                sum = formatValue(sum, 0, 'Amount',1)
                            } else if ((col.type == 'num-fmt') && sum) {
                                sum = formatValue(sum, 0, 'Amount')
                            }
                            if (mo == 'Rate') sum = ''
                            if (debug) console.log('rowgroup:' + ci + ':' + sum + ':' + JSON.stringify(col))
                            var cn=col.className
                            if(!cn)cn=''
                            cn+=' fcRowGroupClass'
                            trE.append('<th class="'+cn+'" >' + sum + '</th>')

                        }
                        rows.nodes().each(function (r) {
                            r.style.display = collapsed ? 'none' : '';
                        });
                        trE.toggleClass('collapsed', collapsed);
                        if (debug) console.log(xx)
                        if (debug) console.log(trE[0].outerHTML)
                        return trE;

                    }



                },
                footerCallback: function (row, data, start, end, display) {

                    var api = this.api();

                    for (var i = 2; i < columns.length; i++) {
                        if(i>=10){
                            var x=''
                        }
                        if (i == forecastRateColumn) continue

                        var c = api.column(i)
                        var col = columns[i]
                        var title = col.name
                        if (col.fullfield) {
                            title = col.fullfield
                        }

                        var allVals=api.column(i).data()
                        var v =api.column(i).data().reduce((a, b) => formattedDecimalToFloat(a) + formattedDecimalToFloat(b), 0);

                        var vals=[]
                        var sum=api.column(i).data().reduce(function (a, b) {
                            vals.push
                            return a + b;
                        })

                        var ty = c.type()
                        if (ty == 'num-fmt') {
                            var tf = formatValue(v, 2, 'Amount')
                        } else {
                            var tf = formatValue(v, 0, 'Number')
                        }
                        var pd=projectData
                        if(!projectData.Forecast)projectData.Forecast={}
                        if(title=='ForecastCost')projectData.Forecast.Labor=v


                        api.column(i).footer().innerHTML = tf;
                    }
                    createForecastSummary()
                },
                data: data,
            });