Tic Tac Toe

I got the game working for the most part but there are a couple of problems:

1. When a shape is put into the grid it hugs the border when I would like it to be a bit smaller than the spot it takes up. I also had to change the circle to a square otherwise the border of the table would wrap around the circle.
2. If you click on the green square when the red square is queued up it will replace the green square. 
• .circle{
      background-color:#00CC00;
      //border-radius: 100%;
      width:90px;
      height:90px;
  }
  .square{
      background-color:#FF0000;
      width:90px;
      height:90px;
• I noticed that whichever style is first is the one that will be replaced. I think both these things have something to do with CSS specificity but I don't quite know.

I forgot to do my JavaScript questions but I am committed to doing it next week!