How to center a table inside grid

Question

I have a grid:

.container {
  height: 100%;
  display: grid;
  grid-gap: 25px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 50px auto auto 50px;
  grid-template-areas: 'h h h h h h h h h h h h' 's s s s s s s s s s s s' 'c c c c c c c c c c c c' 'f f f f f f f f f f f f';
}

.content {
  grid-area: c;
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  table-layout: auto;
  width: 100%;
}

td {
  border: solid 1px black;
  padding: 10px;
}

.width1200 {
  max-width: 1200px;
  padding: 10px;
}

.td100 {
  width: 100px;
}

th {
  background-color: aquamarine;
  border: 1px solid;
}

tr {
  border: solid 1px white;
}

<div class="content">
  <div class="width1200">
    <table>
      <thead>
        <tr>
          <th>Title:</th>
          <th>Price:</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Harry Potter</td>
          <td class="td100">$10</td>
        </tr>
        <tr>
          <td>Nevermind</td>
          <td class="td100">$12</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

I need the table to be centered on the screen. If I add in the .content grid-area justify-self: center; the table is displayed in the center, but the property of the table width:100% stops working. How can I center the table so it will be 100% width