HTML/CSS:Table for poker game - shifted cells

Question

I try to create a result table for a little poker simulator I wrote. It contains DIVs inside table cells to display the cards, but the cells do not line up with the table headers. Checked in brave (chrome) and safari.

I checked the html several times and found no mistake.

The HTML snippet:

<fieldset class="pokerbox">
  <legend>Best hands: </legend>
  <div id="best">
    <table class="s">
      <thead>
        <tr>
          <th>Player</th>
          <th>Hand</th>
          <th>Board</th>
          <th>Result</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="h">Stephan</td>
          <td class="deck">
            <div class="card">
              <div class="rank">2</div>
              <div class="suit">♠</div>
            </div>
            <div class="redcard">
              <div class="rank">K</div>
              <div class="suit">♥</div>
            </div>
          </td>
          <td class="deck">
            <div class="redcard">
              <div class="rank">K</div>
              <div class="suit">♦</div>
            </div>
            <div class="redcard">
              <div class="rank">4</div>
              <div class="suit">♦</div>
            </div>
            <div class="redcard">
              <div class="rank">9</div>
              <div class="suit">♥</div>
            </div>
            <div class="card">
              <div class="rank">K</div>
              <div class="suit">♠</div>
            </div>
            <div class="redcard">
              <div class="rank">Q</div>
              <div class="suit">♥</div>
            </div>
          </td>
          <td class="s">Three of K</td>
        </tr>
        <tr>
          <td class="h">Kai</td>
          <td class="deck">
            <div class="redcard">
              <div class="rank">9</div>
              <div class="suit">♦</div>
            </div>
            <div class="card">
              <div class="rank">Q</div>
              <div class="suit">♠</div>
            </div>
          </td>
          <td class="deck">
            <div class="card">
              <div class="rank">Q</div>
              <div class="suit">♣</div>
            </div>
            <div class="redcard">
              <div class="rank">5</div>
              <div class="suit">♦</div>
            </div>
            <div class="redcard">
              <div class="rank">8</div>
              <div class="suit">♥</div>
            </div>
            <div class="card">
              <div class="rank">K</div>
              <div class="suit">♠</div>
            </div>
            <div class="redcard">
              <div class="rank">A</div>
              <div class="suit">♠</div>
            </div>
          </td>
          <td class="s">Pair of Queens</td>
        </tr>
        <tr>
          <td class="h">Philip</td>
          <td class="deck">
            <div class="redcard">
              <div class="rank">8</div>
              <div class="suit">♦</div>
            </div>
            <div class="card">
              <div class="rank">7</div>
              <div class="suit">♣</div>
            </div>
          </td>
          <td class="deck">
            <div class="card">
              <div class="rank">2</div>
              <div class="suit">♣</div>
            </div>
            <div class="redcard">
              <div class="rank">4</div>
              <div class="suit">♦</div>
            </div>
            <div class="redcard">
              <div class="rank">9</div>
              <div class="suit">♥</div>
            </div>
            <div class="card">
              <div class="rank">5</div>
              <div class="suit">♠</div>
            </div>
            <div class="redcard">
              <div class="rank">6</div>
              <div class="suit">♥</div>
            </div>
          </td>
          <td class="s">Straight to 9</td>
        </tr>
      </tbody>
    </table>
  </div>
</fieldset>

The CSS:

body {
  margin: 0;
  background-color: darkgreen;
  color: white;
  font-family: sans-serif;
}

hr {
  flex-basis: 100%;
  height: 0;
  margin: 0;
  border: 0;
}

.board {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  background-color: darkgreen;
}

.card,
.redcard,
.dead {
  margin: 0.2rem;
  flex-direction: row;
  border: 1px solid black;
  background: rgb(255, 255, 255);
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 1) 12%,
    rgba(212, 212, 212, 1) 100%
  );
  width: 1.8rem;
  padding: 0.2rem;
  height: 2.7rem;
  border-radius: 0.2rem;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  color: black;
  font-family: serif;
}

.redcard {
  color: red;
}

.rank {
  font-family: sans-serif;
  font-weight: bold;
  margin-top: -0.3rem;
  font-size: 1.5rem;
}

.suit {
  width: 100%;
  text-align: right;
  font-size: 1.9rem;
  margin-top: -0.4rem;
}

.dead {
  background-color: #e5e5f7;
  opacity: 0.8;
  background-image: linear-gradient(135deg, #2406d2 25%, transparent 25%),
    linear-gradient(225deg, #444cf7 25%, transparent 25%),
    linear-gradient(45deg, #444cf7 25%, transparent 25%),
    linear-gradient(315deg, #444cf7 25%, #e5e5f7 25%);
  background-position: 10px 0, 10px 0, 0 0, 0 0;
  background-size: 5px 5px;
  background-repeat: repeat;
}

table.s {
  border: 1px solid black;
  width: 100%;
}
th {
  background-color: black;
}

td.s {
  border: 1px solid black;
  text-align: right;
}
td.h {
  border: 1px solid black;
}
td.deck {
  border: 1px solid black;
  float: left;
}

you find the sandboxed code here to play with:

https://codepen.io/Elsni/pen/PoxJWMw