I'm trying to make my page take up the entire width of the page, as per my client's requirement. I tried to do the following. The left side of the table is 10px from the left edge, but there's still a ton of whitespace to the right of the table.

<div class="container"  style="margin: 10px" >
  <div class="table-responsive">
    <table class="table table-bordered table-sm table-striped">

container can have a maximum width of 1140px. If you want full-width table, use container-fluid instead of the container class.

https://codepen.io/anon/pen/rvXYPp

Container is a block element. It is aligned in the center of its parent with the code below.

.container {
    margin-right: auto;
    margin-left: auto;
}

style="margin: 10px" override the code above. Hence, the container is not any more in the center: it is on the left side of its parent.

To fix the issue, add the style directly for the table. The table does not have margin-left and margin-right, but it has margin-bottom:1rem. And that is up to you whether you override it or not.

.m-10px {
  margin: 10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class="table-responsive">
    <table class="table table-bordered table-sm table-striped m-10px">
      <thead>
        <tr>
          <th scope="col ">#</th>
          <th scope="col">First</th>
          <th scope="col">Last</th>
          <th scope="col">Handle</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>