style(index.html) Center content and change div to aside for better semantics in the performance benchmark layout

Author: midudev

11-js-perf-benchmark/index.html

@@ -18,6 +18,9 @@
       color: #fff;
       margin: 0;
       padding: 16px;
+      display: grid;
+      place-content: center;
+      min-height: 100vh;
     }
 
     .container {
@@ -122,6 +125,7 @@
       display: flex;
       flex-direction: column;
       align-items: center;
+      justify-content: center;
 
       .chart {
         width: 200px;
@@ -273,7 +277,7 @@ <h2>Test cases</h2>
       <button class="send-button">Benchmark code! 🚀</button>
 
     </div>
-    <div class="chart-container">
+    <aside class="chart-container">
       <svg class="chart" viewBox="0 0 200 300">
         <rect class="bar" x="20" y="-300" width="2" height="300" fill="green"></rect>
         <rect class="bar" x="70" y="-300" width="2" height="50" fill="yellow"></rect>
@@ -287,7 +291,7 @@ <h2>Test cases</h2>
         <span class="percentage">60%</span>
         <span class="percentage">80%</span>
       </div>
-    </div>
+    </aside>
   </main>
 </body>