current

src/assets/stylesheets/cabledetail.scss

@@ -193,22 +193,24 @@ $white: #fff;
 }
 
 .cable-tables {
-  width: calc(80% + 50px);
+  width: calc(80% + 70px);
   height: auto;
   background-color: transparent;
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
   align-items: stretch;
+  flex-grow: 1;
   justify-content: space-between;
   margin-bottom: 50px;
   margin-top: 5px;
   text-decoration: none;
   overflow: visible;
+  box-sizing: border-box;
 }
 
 .cable-tables-div {
-  width: 48%;
+  width: 31%;
   height: auto;
   cursor: default;
   display: flex;
@@ -216,9 +218,10 @@ $white: #fff;
   align-items: center;
   padding-top: 20px;
   padding-bottom: 20px;
-  margin-top: 5px;
-  margin-bottom: 5px;
   flex-direction: column;
+  box-sizing: border-box;
+  flex-grow: 1;
+  margin: 13px;
 }
 
 .cable-tables-div table {
@@ -245,14 +248,14 @@ $white: #fff;
 
 .head {
   font-family: "Gotham Bold";
-  font-size: 20px;
+  font-size: 18px;
   color: $medium-blue;
   border-top: none;
 }
 
 .body {
   font-family: "Gotham Medium";
-  font-size: 18px;
+  font-size: 16px;
   color: $medium-blue;
 }
 

src/components/CableDetailComponent.js

@@ -159,7 +159,7 @@ export default class CableDetailComponent extends Component {
     }
 
     return (
-      <div className="cable-tables-div" style={{ width: "32%" }}>
+      <div className="cable-tables-div">
         <span className="cable-tables-div-title">{title}</span>
         <table>
           {Object.entries(data).map(([key, value], index) => (