more positoning of elements

frontend/src/components/header/index.js

@@ -78,6 +78,7 @@ const StyledName = styled.span`
   height: ${remcalc(66)};
   position: relative;
   top: ${remcalc(-12)};
+  margin-right: ${remcalc(6)}
 `;
 
 const EmptyButton = styled.button`

ui/src/components/horizontal-list/li.js

@@ -16,21 +16,20 @@ const {
 
 module.exports = styled.li`
   display: inline-block;
-  padding-bottom: ${remcalc(10)};
   
   & + & {
     margin-left: ${remcalc(24)};
   }
 
   & a {
-    color: ${colors.base.primary};
+    color: ${colors.base.secondaryDark};
     text-decoration: none;
-  }
-
-  & a.active {
-    cursor: default;
-    color: ${colors.base.primary};
-    border-bottom: 2px solid ${colors.base.primary};
     padding-bottom: ${remcalc(6)};
+    
+    &.active {
+      cursor: default;
+      color: ${colors.base.primary};
+      border-bottom: 2px solid ${colors.base.primary};
+    }
   }
 `;

ui/src/components/horizontal-list/ul.js

@@ -1,4 +1,9 @@
 const Styled = require('styled-components');
+const fns = require('../../shared/functions');
+
+const {
+  remcalc
+} = fns;
 
 const {
   default: styled
@@ -6,4 +11,5 @@ const {
 
 module.exports = styled.ul`
   list-style-type: none;
+  margin-bottom: ${remcalc(33)};
 `;