Why are my divs moving when I enter X or O in this TicTacToe game

I'm working on a tictactoe game which is basically done, but the UI designs seems to be wrong. When I click on a square (div tag) the square moves down. How could I prevent this? What do I need to add to my html / css code to make it stable? thanks. And here's a link to my codepen, if anything is interested to look at the rest of the code: html,css,js https://codepen.io/zentech/pen/xLRzGr html

<div class="container">
  <!-- header -->
  <div class="header">
    <h1>TicTacToe</h1>
    <h2>You're playing against the computer!</h2>    
  </div>  
  <div class="ticTacToe">      
    <!-- first row (3 square) -->
    <div class="row">
      <div id="0" class="square"></div>
      <div id="1" class="square"></div>
      <div id="2" class="square"></div>      
    </div>

    <!-- second row (3 square) -->
    <div class="row">
      <div id="3" class="square"></div>
      <div id="4" class="square"></div>
      <div id="5" class="square"></div>      
    </div> 

    <!-- third row (3 square) -->
    <div class="row">
      <div id="6" class="square"></div>
      <div id="7" class="square"></div>
      <div id="8" class="square"></div>      
    </div>     
  </div> 
  <div class="controls">
    <h2 id="message">Message:</h2>
    <a href="#" class="resetGame"><h3>Reset Game</h3</a>
  </div>
</div>

css

body {
  background-color: #999;
  font-family: serif, verdana;
}

h1 {
  font-size: 50px;
}

h2 {
  margin-bottom: 30px;
}

.container {
  margin: 0 auto;
  text-align: center;
}

.row > div {
  margin: 2px;
  border: solid 1px black;
  display: inline-block;
  font-size: 35px;
  width: 50px;
  height: 50px;
  text-align: center; 
  padding: 0px;
}

#message {
  /* display: inline-block; */
  text-align: center; 
}