I can't center the letter O no matter what I do

Question

For my TicTacToe game, I can't center the letter O in the grid container. I tried using just-content: center and text-align: center but nothing is working. How do I fix this? I centered the gameboard inside of the container, and then Inside each game cell I tried to center the content within it, but it is not working.

.container {
  border-style: solid;
  width: 600px;
  height: 600px;
  display: grid;
  background-color: orange;
  text-align: center;
  justify-content: center;
  row-gap: 2px;
  grid-template-rows: 1fr 10fr;
  grid-template-columns: 17fr;
}

.gameboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  row-gap: 15px;
  column-gap: 15px;
  padding: 15px;
}

.gamecell {
  border-style: solid;
  display: flex;
  justify-content: center;
  text-align: center;
}

.cross {
  display: flex;
  justify-content: center;
  text-align: center;
  height: 10px;
  width: 10px;
}

<div class="container">
  <div class="header">
    Tic Tac Toe
  </div>

  <div class="gameboard">
    <div class="gamecell" id="one">
      <div class="cross">O</div>
    </div>
    <div class="gamecell" id="two"></div>
    <div class="gamecell" id="three"></div>
    <div class="gamecell" id="four"></div>
    <div class="gamecell" id="five"></div>
    <div class="gamecell" id="six"></div>
    <div class="gamecell" id="seven"></div>
    <div class="gamecell" id="eight"></div>
    <div class="gamecell" id="nine"></div>
  </div>
</div>