Layout Issues

[gallm551]

So I'm not exactly sure what I'm doing wrong but for some reason my Twister mat just doesn't show up anymore? I have a feeling its because of the inline block display but I can't figure it out.

<div class="mat"> 
                <div class="row1 dotgrn g1"></div>
                <div class="row1 dotyell y1"></div>
                <div class="row1 dotred r1"></div>
                <div class="row1 dotblu b1"></div>
                <div class="row2 dotgrn g2"></div>
                <div class="row2 dotyell y2"></div>
                <div class="row2 dotred r2"></div>
                <div class="row2 dotblu b2"></div>
                <div class="row3 dotgrn g3"></div>
                <div class="row3 dotyell y3"></div>
                <div class="row3 dotred r3"></div>
                <div class="row3 dotblu b3"></div>
                <div class="row4 dotgrn g4"></div>
                <div class="row4 dotyell y4"></div>
                <div class="row4 dotred r4"></div>
                <div class="row4 dotblu b4"></div>
                <div class="row5 dotgrn g5"></div>
                <div class="row5 dotyell y5"></div>
                <div class="row5 dotred r5"></div>
                <div class="row5 dotblu b5"></div>
                <div class="row6 dotgrn g6"></div>
                <div class="row6 dotyell y6"></div>
                <div class="row6 dotred r6"></div>
                <div class="row6 dotblu b6"></div>
            </div>

.mat {
  background-color: lightgrey;
  border-width: 1.5px;
  border-color: black;
  border-style: solid;
}

.dotgrn, .dotyell, .dotred, .dotblu {
  margin: 15px;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}
.dotgrn {
  background-color: green;
}
.dotyell {
  background-color: yellow;
}
.dotred {
  background-color: red;
}
.dotblu {
  background-color: blue;
}
.row1 {
  display: inline-block;
}