表和H1不对齐

Question

Why are both my H1 and table not aligning to the center? I would like both my H1 id and my table to be centered with one and other I posted a image below of how I would like my website to look and the current state of it. I tried text-align:center; to shift both my H1 id and my table but it doesnt seem to work, I also tried to use for my table to center with my H1 but that also did not work. I am unsure how to approach this problem and what I need to go about to do to solve it.

HTML

  <h1 id="meetsh1">Recent Meets</h1>
  <table align="center">
    <tr>
      <th>Date</th>
      <th>Teams</th>
      <th>Score</th>
    </tr>
    <tr>
      <td>03/03/18</td>
      <td>Harrison at NYS Championships (Finals)</td>
      <td>-</td>
    </tr>
    <tr>
      <td>03/02/18</td>
      <td>Harrison at NYS Championships (Prelims)</td>
      <td>-</td>
    </tr>
    <tr>
      <td>02/13/18</td>
      <td>Harrison at Section I Championships (Finals)</td>
      <td>-</td>
    </tr>
    <tr>
      <td>02/12/18</td>
      <td>Harrison at Section I Championships (Prelims)</td>
      <td>-</td>
    </tr>
    <tr>
      <td>02/08/18</td>
      <td>Harrison at Section I Championships (Dive)</td>
      <td>-</td>
    </tr>
    <tr>
      <td>01/29/18</td>
      <td>Harrison VS Ossining</td>
      <td>53-41</td>
    </tr>
  </table>

CSS

#meetsh1 {
  text-align: center;
  padding-top: 30px;
  font-weight: bolder;
  text-decoration: underline;
  color: #000000;
  font-size: 25px;
}

table {
  border-collapse: collapse;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 100px;
}

td, th {
  border: 1px solid #dddddd;
  text-align: center;
  padding: 8px;
}

What my website currently looks like.

How I want it to look.

Jfiddle

Answer 1

Table and header are actually centered. The problem is that the calculated size for the outer columns differ slightly. Therefore the center column is not centered.

To solve that, you could add a class to the 'Date' and 'Score' column and set a fixed width via CSS.

<tr>
  <th class="same-size-col">Date</th>
  <th>Teams</th>
  <th class="same-size-col">Score</th>
</tr>

and in your CSS file:

.same-size-col {
   width: 15%; /* or e.g. 100px */
}

Or you use th:first-child, th:last-child , which keeps your html cleaner.

Answer 2

The first column is a bit bigger than the last. So the middle column is between two unequally sized columns. Add this to your css:

th:first-child, th:last-child{ 
    width: 175px; /* fixed width! */
}

The column sizes auto-adjust depending on the text inside them.