Improved CSS

src/components/App.css

@@ -1,3 +1,8 @@
+html,
+body,
+#root {
+  height: 100%;
+}
 .navbar {
   color: #ffffff;
   padding-left: 40px;
@@ -5,11 +10,20 @@
   padding: 5px 5px 5px 35px;
   font-family: segoe ui;
 }
+.navbar h4 {
+    margin-bottom: 0;
+}
 .logo {
   height: 30px;
   width: 30px;
   margin-right: 10px;
 }
+.outerContainer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: space-between;
+}
 a {
   color: inherit;
 }
@@ -26,5 +40,7 @@ footer{
 }
 
 @media screen and (max-width: 600px) {
-    footer{margin-top:40px;}
+  footer {
+    margin-top: 40px;
+  }
 }

src/components/App.js

@@ -6,7 +6,7 @@ class App extends React.Component {
 
     render() {
         return (
-            <div>
+            <div className={"outerContainer"}>
                 <Navbar />
                 <ConfigCover />
                 <Footer />

src/components/ConfigCover.css

@@ -8,7 +8,7 @@ body {
 	align-items: center;  */
 	display: flex;
 	flex-direction: row;
-
+	align-items: center;
 }
 .tagline {
 	max-width: 300px;
@@ -85,7 +85,7 @@ svg {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	margin:60px;
+	width: 100%;
 	}
 label{
 	margin: 5px;

src/components/CoverImage.css

@@ -31,7 +31,6 @@ i{
     margin-left:2vw;
 }
 .author{
-    float:right;
     margin-right:3vw;
 }
 .meta{
@@ -41,7 +40,9 @@ i{
     height:42px;
     padding :4px;
     font-weight: 500;
-    vertical-align: middle;    
+    display: flex;
+    align-items: center;
+    justify-content: space-between  
 }
 
 h1{