[gchq#181] clean up some inconstencies in alignments, add a little bit more space for mobile usability

Author: valdelaseras

src/web/stylesheets/layout/_banner.css

@@ -8,9 +8,9 @@
 
 #banner {
     position: absolute;
-    height: 30px;
+    height: 40px;
     width: 100%;
-    line-height: 30px;
+    line-height: 40px;
     border-bottom: 1px solid var(--primary-border-colour);
     color: var(--banner-font-colour);
     background-color: var(--banner-bg-colour);

src/web/stylesheets/layout/_io.css

@@ -413,7 +413,8 @@
     font-family: var(--fixed-width-font-family);
     font-weight: normal;
     font-size: 8pt;
-    margin: 0 5px;
+    /*0 5px for desktop*/
+    margin: 5px 15px;
     display: flex;
     flex-flow: row nowrap;
     justify-content: space-between;

src/web/stylesheets/layout/_structure.css

@@ -29,8 +29,9 @@ body {
 /*//////// mobile ui updates below ///////////*/
 /* this is temporary ( unorganised and unrefined )*/
 
+/*@todo: use a banner-height var or something so these two will always align*/
 #workspace-wrapper {
-    margin-top: 30px;
+    margin-top: 40px;
 }
 
 #content-wrapper,