无需自定义CSS，如何缩小Bootstrap容器的横向边距？

我的网页情况如下（含多张截图）：

您能看到表格下方的滚动条吗？我希望通过缩小容器的横向边距来解决这个问题，以下是我尝试过的方法：

• 手动指定边距：添加m-2类，结果容器不再居中

  <div class="container m-2">
  

  

• 使用container-sm类：结果容器完全没有边距

  <div class="container-sm">
  

  

• 组合上述两种方法：添加container-sm m-2类，效果不符合预期

  <div class="container-sm m-2">
  

  

• 使用mx类：添加mx-4类，结果容器不再居中

  <div class = "container mx-4">
  

  

我已经在StackOverflow和谷歌搜索过相关解决方案，但没找到合适的方法。

请问如何在不覆盖Bootstrap原生CSS、不编写自定义样式表的前提下，缩小容器的横向边距？

编写哪怕少量自定义CSS来解决这个小问题似乎有些小题大做（比如<style> .container {margin-left: 4 rem; margin-right: 4 rem} </style>）

我的页面基础代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<!-- and so forth -->
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

更新：最新发现
这个问题和container的max-width属性有关（将其从1140增大到2000时，边距会缩小），同时也和最外层的row相关，右侧的虚线区域实际增大了右边距。

我推测mw-100和justify-content-center类可能可以解决该问题。

内容的提问来源于stack exchange，提问作者Sergey Zolotarev