chart container positioning

static/monit-dashboard.css

@@ -37,7 +37,7 @@ button.accordion {
     cursor: pointer;
     padding: 18px;
     width: 100%;
-    text-align: left;
+    text-align: center;
     border: none;
     outline: none;
     transition: 0.4s;
@@ -72,6 +72,12 @@ div.panel.show {
     background-color: #c9302c;
 }
 
+.canvas-container {
+  height: 40%;
+  margin: auto;
+  width: 24%;
+}
+
 .canvas-graph {
   min-height: 30%;
   min-width: 24.5%;
@@ -81,3 +87,10 @@ div.panel.show {
   margin: 20px 0;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)
 }
+
+.canvas-header {
+    padding: 1rem;
+    height: 2rem;
+    background-color: #F2F2F2;
+    text-align: center;
+}

templates/index.html

@@ -79,9 +79,9 @@ $for server in range(len(output)):
 </div>
 
 
-<div style="height:40%">
+<div class="canvas-container">
 <div class="canvas-graph">
-<div style="background-color: grey; text-align: center;"><h3>Hosts status</h3></div>
+<div class="canvas-header"><h2 style="margin: 0">Hosts status</h2></div>
 <canvas id="canvas" width="400" height="400"></canvas>
 </div>
 </div>