health buttons are rendering below microservice details button

Author: robicano22

app/components/ServiceDetails.jsx

@@ -1,11 +1,5 @@
 import React, { useState } from 'react';
 import Modal from './Modal.jsx';
-import pieChart from '../assets/pieChart.png';
-import memoryChart from '../assets/memoryChart.png';
-import tempChart from '../assets/tempChart.png';
-import speedChart from '../assets/speedChart.png';
-import latencyChart from '../assets/latencyChart.png';
-import processingChart from '../assets/processingChart.png';
 
 // Renders charts created with health and communication data for a selected database.
 const ServiceDetails = (props) => {
@@ -26,7 +20,6 @@ const ServiceDetails = (props) => {
   const buttonProperties = [
     { id: 'request', alt: 'Request Data', src: 'app/assets/pieChart.png' },
     { id: 'response', alt: 'Response Data', src: 'app/assets/pieChart.png' },
-    // { id: 'routes', alt: 'Route Trace', src: 'https://st2.depositphotos.com/3894705/9581/i/950/depositphotos_95816620-stock-photo-round-button-shows-speedometer.jpg' },
     { id: 'speed', alt: 'Speed Data', src: 'app/assets/speedChart.png' },
     { id: 'processes', alt: 'Processes Data', src: 'app/assets/processingChart.png' },
     { id: 'latency', alt: 'Latency Data', src: 'app/assets/latencyChart.png' },

app/components/ServiceOverview.jsx

@@ -175,16 +175,10 @@ const ServiceOverview = (props) => {
     return componentButtons;
   };
 
-  if (detailsSelected) return detailsSelected;
-
   return (
     <div className="mainContainer">
-      <div>
-        <h1 className="overviewTitle">Microservices Overview</h1>
-      </div>
-      <div className="servicesList">{serviceList()}</div>
-      <br />
-      <h1>Microservices Communications</h1>
+      <h1 className="overviewTitle">Microservices Overview</h1>
+      <h2>Communications Data</h2>
       {modalDisplay ? (
         <Modal
           chartTitle={chartTitle}
@@ -200,7 +194,9 @@ const ServiceOverview = (props) => {
         {routes}
         {traffic}
       </div>
-
+      <div className="servicesList">{serviceList()}</div>
+      <br />
+      {detailsSelected || null}
     </div>
   );
 };

app/index.css

@@ -76,10 +76,8 @@ margin-top: -100px;
 
 .mainContainer {
   font-family: Arial, Helvetica, sans-serif;
-  display: grid;
-  grid-template-columns: 100%;
-  grid-template-rows: 33% 33% 33%;
-  justify-items: center;
+  display: flex;
+  flex-direction: column;
   align-items: center;
   color: white;
 }
@@ -123,7 +121,7 @@ margin-top: -100px;
 }
 
 .overviewTitle {
-  margin-top: 80px;
+  margin-top: 40px;
 }
 
 .leftTopContainer {