bootstrapのtableの幅がHTMLの幅を超えた広さになります。

bootstrapのtableをしようしていますが
画像のように、横幅がtableだけ大きくなってしまい
それによって画面幅を小さくしたときに、変な余白が右側に出てきます。

HTMLの横幅（他の部分が収まっている幅）に合わせる方法があれば
ご教示いただきたいです。

html
1
2        <div id="access" class="animated">
3            <h1 class="access-title">Access</h1>
4            <div class="container-fluid">
5                <div class="row">
6                    <div class="col-12 col-sm-12 col-md-12 col-lg-12">
7                        <div class="row">
8                            <div class="table-contents col-12 col-sm-12 col-md-6 col-lg-6">
9                                <table class="table jp">
10                                    <tr>
11                                        <td>営業時間</td>
12                                        <td>9:00〜20:00</td>
13                                        <td></td>
14                                    </tr>
15                                    <tr>
16                                        <td>最終受付</td>
17                                        <td>CUT 19:00</td>
18                                        <td>COLOR 18:00</td>
19                                    </tr>
20                                    <tr>
21                                        <td>電話番号</td>
22                                        <td>0595-51-8771</td>
23                                        <td>予約制とさせて頂いています。<br>(当日予約OK)</td>
24                                    </tr>
25                                    <tr>
26                                        <td>住所</td>
27                                        <td>名張市つつじが丘北3-3-1</td>
28                                        <td></td>
29                                    </tr>
30                                    <tr>
31                                        <td>定休日</td>
32                                        <td>木曜日</td>
33                                        <td>※毎月臨時休業日有り</td>
34                                    </tr>
35                                </table>
36                            </div>
37                            <img class="onmap" src="img/onmap.jpg" alt="マップ上部画像">
38                                <div class="map col-12 col-sm-12 col-md-6 col-lg-6">
39                                <iframe class="map-like-box" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3283.8730763176723!2d136.1231950152297!3d34.60737088045855!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6006ac7c8af97cb3%3A0x84c90ff3b626cd04!2z44CSNTE4LTA0MzIg5LiJ6YeN55yM5ZCN5by15biC44Gk44Gk44GY44GM5LiY5YyX77yS55Wq55S677yT!5e0!3m2!1sja!2sjp!4v1612870622927!5m2!1sja!2sjp"></iframe>
40                                </div>
41                        </div>
42                    </div>
43                </div>
44            </div>
45        </div>

css
1/* アクセス */
2#access{
3    color: #e6d6b4;
4    padding-bottom: 7rem;
5}
6
7#access img{
8    width: 100%;
9    margin-bottom: 7rem;
10}
11
12.table{
13    color: #e6d6b4;
14    font-size: 2vw;
15    margin-bottom: 7rem;
16}
17
18.access-title{
19    text-align: center;
20    font-size: 10vw;
21    font-family: 'Caveat', cursive;
22
23}
24
25.table td{
26    vertical-align: middle;
27    text-align: left;
28    white-space: nowrap;
29}
30
31iframe.map-like-box{
32    border: 0;
33    background-color: transparent;
34    overflow: hidden;
35    width: 100%;/*ライクボックスの幅を指定*/
36    height: 30vh;/*ライクボックスの高さを指定*/
37  }
38