I have a standard table which consists of a header row and n-data rows. The width of the table exceeds the size of the container in which it resides. I have styling on the header row (white background) which seems to truncate at the end of the viewable table. The overflow portion of the table does not seem to have the style applied. Is there something I am missing?

CSS

.grid-wrapper {
    overflow-x: scroll;
    text-align: center;

    > .gt-header {
        font-weight: bold;
        background-color: white;
        border-bottom: 1px solid black;
    }

    #training {
        display: grid;
        grid-template-columns: $grid-psta-training
    }
    #training-data > div {
        display: grid;
        grid-template-columns: $grid-psta-training;
        text-align: center;
    }
}

I used min-width: 100% with the hope that the styling would apply to the overflow area but with not luck. The area is left un-styled.