Tabela niszczy układ strony, ponieważ jest poziomy pasek przewijania o parę px. Jak to naprawić?

Doszedłem do wniosku, że tabela mi wszystko psuje, bo jak jej nie ma to jest ok, ale jak tylko ją dodaję, to niestety, ale pojawia się poziomy pasek przewijania strony dosłownie o parę px. CSS również na błąd nie wpływa, bo sprawdziłem wywalając go. Jak to naprawić, co zrobiłem źle?

<div class="row">
    <div class="col-6 offset-3">
        <table class="table table-bordered text-white">
            <thead class="header">
            <tr>
                <th scope="col">#</th>
                <th scope="col">Nazwa</th>
                <th scope="col">Cena netto</th>
                <th scope="col">Podatek</th>
                <th scope="col">Czynność</th>
            </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John</td>
                    <td>Doe</td>
                    <td>[email protected]</td>
                    <td>0.23</td>
                    <td>
                        <button class="btn btn-sm bg-success">Wyświetl</button>
                        <button class="btn btn-sm bg-warning">Edytuj</button>
                        <button class="btn btn-sm bg-danger">Usuń</button>
                    </td>
                </tr>
                <tr>
                    <td>John</td>
                    <td>Doe</td>
                    <td>[email protected]</td>
                    <td>0.23</td>
                    <td>
                        <button class="btn btn-sm bg-success">Wyświetl</button>
                        <button class="btn btn-sm bg-warning">Edytuj</button>
                        <button class="btn btn-sm bg-danger">Usuń</button>
                    </td>
                </tr>
                <tr>
                    <td>John</td>
                    <td>Doe</td>
                    <td>[email protected]</td>
                    <td>0.23</td>
                    <td>
                        <button class="btn btn-sm bg-success">Wyświetl</button>
                        <button class="btn btn-sm bg-warning">Edytuj</button>
                        <button class="btn btn-sm bg-danger">Usuń</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Mmm... ale czy to jest istotne, by umieszczać tabelę w Bootstrap'owym gridzie (row, col)?

Nie rozumiem natury problemu.

W każdej rozdzielczości ci się ten pasek przewijania pojawia czy jak?

W dokumentacji jest napisane, że aby tablica była responsywna, trzeba dodać klasę table-responsive.

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>