Memory Test game with new CSS Box Modeling applied

While creating memory test game, I learned about the new css box model.

What and why new css box model?

1. Apply box-sizing: border-box.

2. This changes the box model include border, padding when calculating the height or width for you so that you don't have to worry if the element will spill over the parent container.
   

//  change the box model for all elements on the web page to the new box model.
* {
  box-sizing: border-box;
}

h1 {
  border: 1px solid red;
  height: 600px;
  width: 700px;
  padding: 10px;
}

image credit: https://www.oreilly.com/library/view/css-in-depth/9781617293450/kindle_split_030.html