Bootstrap 4: how to keep side padding of table within card?

JSFiddle: https://jsfiddle.net/fwj8tk5q/

I have a table inside a card element. When I shrink the window really small to immitate a mobile device, the left padding stays, but the right padding is lost. How do I keep the right side padding within the card for small screens?

<div class="row">
    <div class="col-lg-8 offset-lg-2 pt-4">
        <div id="accordion">
            <div class="card mb-4">
                <div class="card-header" id="headingOne">
                    <h5 class="mb-0">
                        <button
                            class="btn btn-link"
                            data-toggle="collapse"
                            data-target="#collapseOne"
                            aria-expanded="true"
                            aria-controls="collapseOne"
                        >
                            Card
                        </button>
                    </h5>
                </div>

                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                    <div class="card-body table-responsive">
                        <table class="table table-bordered table-striped table-sm text-center">
                            <thead>
                                <tr>
                                    <th>Column One</th>
                                    <th>Column Two</th>
                                    <th>Column Three</th>
                                    <th>Column Four</th>
                                    <th>Column Five</th>
                                    <th>Column Six</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Value One</td>
                                    <td>Value Two</td>
                                    <td>Value Three</td>
                                    <td>Value Four</td>
                                    <td>Value Five</td>
                                    <td>Value Six</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>