Revise styles for game board column labels (#1)

- Just a few tweaks here. The general principle is good.
- If you want <div> elements to display horizontally, they need to
  be wrapped in a parent <div> which has "display: flex;" in the css.
- Then, add a width and centering to the individual labels.

src/components/GameBoard.component.js

@@ -23,17 +23,16 @@ const template  = `
 <div class="game-board-component" v-if="ready">
     <div class="grid-container">
         <div class="grid-row" v-for="(row,i) of rows">
-        <br> {{i}}
+        <br> <span class="label">{{ i + 1 }}</span>
             <app-game-cell
                 v-for="cell of row"
                 v-bind:render="cell.render"
             ></app-game-cell>
         </div>
-     <!--   <div class="column_labels"
+         <div class="column_labels">
-        v-for="(label,i) of column_labels">
+             <div class="label" v-for="(label,i) of column_labels">{{ label }}</div>
-            {{ column_labels[i] }}
+         </div>
-       </div> --!>
+    </div>
-     </div>
 </div>
 `
 export default class GameBoardComponent extends Component {

src/style/components.css

@@ -1,7 +1,21 @@
+/* Styles for top-level component */
+.top-level-component .game-boards-container {
+    display: flex;
+}
+
+.top-level-component .game-boards-container .game-board {
+    margin-right: 50px;
+}
+
 .game-board-component .grid-container .grid-row {
     display: flex;
 }
 
+.game-board-component .grid-container .grid-row .label {
+    margin-right: 5px;
+    padding-top: 10px;
+}
+
 /* Styles for the various grid cell states. */
 
 .game-board-cell-component {
@@ -42,13 +56,13 @@
     background: #eeeeee;
 }
 
-.game-board-component {
+.column_labels {
     display: flex;
+    margin-top: 5px;
+    margin-left: 15px;
+}
 
+.column_labels .label {
+    width: 42px;
+    text-align: center;
 }
-.column_labels {
-    
-    padding: 20px;  
-    flex-direction: column-reverse;
- 
-}