制作更大宽度时不再居中

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表的width选项现在为80％。一切看起来都很不错：https://www.dropbox.com/s/4bihqrbxgyauqrg/good.PNG?dl=0 但是，当我想使表格变大并将宽度设置为100％时，会发生这种情况： https://www.dropbox.com/s/8hpi88rvkzpijbt/bug.PNG?dl=0表格的大小似乎相同，但不再居中。如何解决所有问题。 〜菲利普 大小，但不再居中。如何解决所有问题。
〜filip