CSS布局技巧：实现导航栏与表格的精准居中

.nav-g ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center; /* 关键：使内联块级子元素居中 */
}

.nav-g li {
  list-style: none;
  display: inline-block; /* 使导航项并排显示 */
}

.nav-g a {
  text-decoration: none;
  width: 100px; /* 根据需要调整宽度 */
  display: block; /* 使链接填充整个li区域 */
  padding: 2px;
  font-size: 15px;
  font-weight: lighter;
  text-align: center;
  color: white;
  font-family: arial;
  /* 移除 float: left; */
}

.nav-g ul {
  display: flex; /* 启用Flexbox */
  justify-content: center; /* 水平居中所有子项 */
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-g li {
  /* 不再需要 display: inline-block; */
  /* 其他样式保持不变 */
}

.bet-table {
  /* 移除 display: table-cell; */
  margin: 0; /* 保持其他边距设置 */
  color: white;
  /* text-align: center; */ /* 对表格自身居中无效，但可用于内部文本 */
  /* width: 100%; */ /* 根据需要设置 */
}

.bet-table table {
  margin: 0 auto; /* 关键：使表格水平居中 */
  width: 100%; /* 确保表格有宽度，否则margin: auto无效 */
  border-collapse: collapse; /* 推荐：合并边框 */
}

.bet-table th,
td {
  border: 1px solid white; /* 边框颜色与背景区分 */
  text-align: center;
  padding: 5px;
}

<div id="h-container">
  <h2 class="logo">Betbowl</h2> <!-- 修正：h2标签闭合 -->
  <div class="nav-g">
    <ul>
      <li><a href="#">Make-A-Bet</a></li> <!-- 修正：a标签闭合 -->
      <li><a href="#">Pending</a></li>
      <li><a href="#">Completed</a></li>
    </ul>
  </div>
</div>
<div class="Choose">
  <h3>Choose</h3>
</div>
<div class="bet-table">
  <table style="width:100%;"> <!-- 移除行内样式 margin-left/right，由CSS控制 -->
    <tr>
      <th>Situation</th>
      <th>Bet</th>
      <th>Winner</th>
      <th>Earnings</th>
    </tr>
    <tr>
      <td>blank</td>
      <td>blank</td>
      <td>blank</td>
      <td>blank</td>
    </tr>
    <tr>
      <td>blank</td>
      <td>blank</td>
      <td>blank</td>
      <td>blank</td>
    </tr>
    <tr></tr>
  </table>
</div>

* {
  background-color: #2c2f33;
  text-decoration: none;
  box-sizing: border-box; /* 推荐：