Table headers and column mis-aligned

Question

The data in the column does not align with the headers.

I have tried to set the display in the head to

 display: table-header-group;

to no avail.

Thanks

  table {
  border-collapse: collapse;
  margin: 25px;
  font-size: 0.9em;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  background-color: bisque;
  table-layout: fixed;

  thead {
    border: 1px solid black;
    display: table-header-group;

    tr {
      background-color: #009879;
      color: white;
      font-weight: bold;
      text-align: left;
    }
  }
  tbody {
    tr:nth-of-type(even) {
      background-color: whitesmoke;
    }
  }
}

<table>
    <thead>
      <tr>
        <th id="monthName">Months</th>
          <th class="header" colspan="2">June</th>
          <th class="header" colspan="2">July</th>
          <th class="header" colspan="2">August</th>
          <th class="header" colspan="2">September</th>
          <th class="header" colspan="2">October</th>
          <th class="header" colspan="2">February</th>
          <th class="header" colspan="2">March</th>
          <th class="header" colspan="2">April</th>
          <th class="header" colspan="2">January</th>
          <th class="header" colspan="2">May</th>
      </tr>
    </thead>
    <tbody>
        <tr>
          <td class="question">x</td>
            <td class="answer">95</td>
            <td class="answer">73</td>
            <td class="answer">73</td>
            <td class="answer">56</td>
            <td class="answer">63</td>
            <td class="answer">68</td>
            <td class="answer">80</td>
            <td class="answer">86</td>
            <td class="answer"></td>
            <td class="answer"></td>
        </tr>
        <tr>
          <td class="question">y</td>
            <td class="answer">68</td>
            <td class="answer">85</td>
            <td class="answer">64</td>
            <td class="answer">56</td>
            <td class="answer">96</td>
            <td class="answer">100</td>
            <td class="answer"></td>
            <td class="answer"></td>
            <td class="answer">89</td>
            <td class="answer">79</td>
        </tr>
        <tr>
          <td class="question">z</td>
            <td class="answer">61</td>
            <td class="answer">59</td>
            <td class="answer">86</td>
            <td class="answer">44</td>
            <td class="answer">86</td>
            <td class="answer">65</td>
            <td class="answer"></td>
            <td class="answer">73</td>
            <td class="answer">51</td>
            <td class="answer">92</td>
        </tr>
    </tbody>
  </table>

I tried to align the content of the body to the headers so that it looks like a spreadsheet but the answers get bunched together.

Answer 1

Your use of colspan="2" is making the header row 21 columns wide (1 + 10*2), when your three data rows are 11 columns wide.