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

<li><a href="#">Make-A-Bet</li>

<li><a href="#">Make-A-Bet</a></li>
<li><a href="#">Pending</a></li>
<li><a href="#">Completed</a></li>

.nav-g li {
  list-style: none;
  display: inline-block; /* 正确，使li可以并排显示 */
}

.nav-g a {
  /* ... */
  float: left; /* 问题所在：浮动元素脱离文档流，难以通过text-align居中 */
}

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

.nav-g li {
  list-style: none;
  display: inline-block; /* 保持li为inline-block，以便并排显示 */
}

.nav-g a {
  text-decoration: none;
  width: 100px;
  display: block; /* 使a标签填充li的宽度 */
  padding: 2px;
  font-size: 15px;
  font-weight: lighter;
  text-align: center; /* 使a标签内部的文本居中 */
  color: white;
  font-family: arial;
  /* 移除 float: left; */
}

.bet-table {
  display: table-cell; /* 问题所在：将容器设置为table-cell，可能导致布局异常 */
  margin: 0;
  color: white;
}

.bet-table table {
  margin-left: auto;
  margin-right: auto; /* 正确的表格居中方式 */
}

.bet-table {
  /* 移除 display: table-cell; 保持其默认的块级行为 */
  margin: 0;
  color: white;
  text-align: center; /* 如果bet-table内有inline内容，可居中 */
  width: 100%; /* 确保容器宽度足够 */
}

.bet-table table {
  margin: 0 auto; /* 关键：使表格水平居中 */
  width: 100%; /* 确保表格宽度，以便margin auto生效 */
}

<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>    <!-- 修正a闭合 -->
      <li><a href="#">Completed</a></li>  <!-- 修正a闭合 -->
    </ul>
  </div>
</div>
<div class="Choose">
  <h3>Choose</h3>
</div>
<div class="bet-table">
  <table style="width:100%;"> <!-- 移除行内样式，推荐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;
}

.logo {
  text-align: center;
  font-size: 40px;
  font-family: arial;
  font-weight: lighter;
  color: white;
}

.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; /* 链接作为块级元素占据宽度 */
  padding: 2px;
  font-size: 15px;
  font-weight: lighter;
  text-align: center; /* 链接内部文本居中 */
  color: white;
  font-family: arial;
  /* 移除 float: left; */
}

.navbar a:hover {
  color: #7289da;
}

.Choose h3 {
  color: white;
  background-color: #7289da;
  padding: 8px;
  border: 1px solid black;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
  margin-top: 5pc;
}

.bet-table {
  /* 移除 display: table-cell; */
  margin: 0;
  color: white;
  /* text-align: center; */ /* 如果bet-table内有其他inline内容需要居中，可以保留 */
  width: 100%; /* 确保容器宽度 */
}

.bet-table th,
td {
  border: 1px solid;
  text-align: center;
  padding: 5px;
}

.bet-table table {
  margin: 0 auto; /* 表格核心居中 */
  width: 100%; /* 表格宽度 */
}