HTML/CSS Tic Tac Toe board: cells are moving around while they shouldn't

I am learning HTML/CSS/JavaScript and I am trying to make a Tic Tac Toe game in the browser. I thought I had the board set up, but noticed that the cells are changing position as soon as I remove one or more X/O tokens. I can't figure out what causes this bug and would really appreciate help.

.board {    display: block;    width: 350px;    height: 350px;    margin: 70px auto;  }    .cell {    display: inline-flex;    margin: 2px 0;    border: 3px solid black;    width: 100px;    height: 100px;    box-shadow: 2px 2px;    justify-content: center;    align-items: center;    font-size: 100px;  }

<section class="board">    <h2>Player X's turn</h2>    <div class="row0">      <div class="cell c00">X</div>      <div class="cell c01">O</div>      <div class="cell c02">X</div>    </div>    <div class="row1">      <div class="cell c10">O</div>      <div class="cell c11">X</div>      <div class="cell c12">O</div>    </div>    <div class="row2">      <div class="cell c20">X</div>      <div class="cell c21">O</div>      <div class="cell c22">X</div>    </div>  </section>

Thanks a lot in advance :)

https://stackoverflow.com/questions/66933465/html-css-tic-tac-toe-board-cells-are-moving-around-while-they-shouldnt April 04, 2021 at 12:30AM