Rearrange to avoid position: absolute

src/Board.tsx

@@ -103,7 +103,7 @@ class Board extends React.Component<{}, State> {
     const { grid, running, speed, width, height } = this.state;
 
     return (
-      <div className="board">
+      <div className="container">
         <Controls
           running={running}
           speed={speed}
@@ -114,20 +114,24 @@ class Board extends React.Component<{}, State> {
           updateSpeed={this.updateSpeed}
           reset={this.reset}
         />
-        {grid.map((row, y) => (
-          <div className="row" key={y}>
-            {row.map((cell, x) => (
-              <Cell
-                disabled={running}
-                x={x}
-                y={y}
-                alive={cell}
-                toggle={this.toggleCell}
-                key={x}
-              />
+        <div className="board-container">
+          <div className="board">
+            {grid.map((row, y) => (
+              <div className="row" key={y}>
+                {row.map((cell, x) => (
+                  <Cell
+                    disabled={running}
+                    x={x}
+                    y={y}
+                    alive={cell}
+                    toggle={this.toggleCell}
+                    key={x}
+                  />
+                ))}
+              </div>
             ))}
           </div>
-        ))}
+        </div>
       </div>
     );
   }

src/index.css

@@ -21,10 +21,26 @@ code {
   align-items: center;
   display: flex;
   height: 100vh;
-  justify-content: center;
+  flex-direction: column;
   width: 100vw;
 }
 
+.controls {
+  background: black;
+  color: white;
+  display: flex;
+  padding: 1em;
+  width: 100%;
+}
+
+.board-container {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  width: 100%;
+}
+
 .row {
   height: 30px;
 }
@@ -54,17 +70,6 @@ code {
   cursor: pointer;
 }
 
-.controls {
-  background: black;
-  color: white;
-  display: flex;
-  left: 0;
-  padding: 1em;
-  position: absolute;
-  top: 0;
-  width: 100%;
-}
-
 .button {
   background: black;
   border: 1px solid white;

src/index.tsx

@@ -6,9 +6,7 @@ import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
   <React.StrictMode>
-    <div className="container">
-      <Board />
-    </div>
+    <Board />
   </React.StrictMode>,
   document.getElementById('root'),
 );