Больше не центрируется при увеличении ширины

Question

У меня есть этот HTML-код:

.kobel_content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.kobel_content table {
  border-collapse: collapse;
  border-spacing: 100px 0;
  width: 80%;
}

.kobel_content th,
td {
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.noten_stats {
  height: 80%;
  margin: auto;
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: baseline;
}

.noten_stats {
  color: #ffffff;
  font-size: 50px;
  font-family: 'Poppins', sans-serif;
}

<div class='general noten_stats'>
  <p class="noten_stats_title kobelH">Kobeltage</p>
  <div class="kobel_content days" id="kobel_content_days">
    <table class="kobel_days_table" id="kobel_days_table">
      <thead>
        <tr>
          <th>Wochentag</th>
          <th>Datum</th>
          <th>Thema</th>
          <th>Kobelwirte</th>
        </tr>
      </thead>
      <tbody>

      </tbody>
    </table>

  </div>
</div>

Примечание. Мой код JS добавляет элементы в таблицу. Параметр ширины таблицы kobel_content сейчас равен 80%. И все выглядит отлично: https://www.dropbox.com/s/4bihqrbxgyauqrg/good.PNG?dl=0 Но когда я хочу увеличить таблицу и установить ширину на 100%, это происходит: https://www.dropbox.com/s/8hpi88rvkzpijbt/bug.PNG?dl=0 Похоже, таблица имеет такой же размер, но больше не центрируется. Как это все исправить. ~ Filip размер, но не по центру больше. Как это все исправить.
~ Filip