diff --git a/client/src/layouts/DefaultFooter.vue b/client/src/layouts/DefaultFooter.vue
index 0b2a693b..f8510b5e 100644
--- a/client/src/layouts/DefaultFooter.vue
+++ b/client/src/layouts/DefaultFooter.vue
@@ -68,6 +68,8 @@
 
   .default-footer {
     background-color: $color-silver-light;
+    max-width: 100vw;
+    overflow: hidden;
 
     &__section {
       width: 100%;
@@ -77,7 +79,8 @@
     }
 
     &__info {
-      width: $footer-width;
+      width: 100%;
+      max-width: $footer-width;
       padding: 2*$large-spacing 0;
       display: flex;
       justify-content: space-between;
@@ -98,7 +101,8 @@
     }
 
     &__links {
-      width: $footer-width;
+      width: 100%;
+      max-width: $footer-width;
       padding: $large-spacing 0;
     }
 
diff --git a/client/src/styles/_book-subnavigation.scss b/client/src/styles/_book-subnavigation.scss
index e288346d..64e1dae3 100644
--- a/client/src/styles/_book-subnavigation.scss
+++ b/client/src/styles/_book-subnavigation.scss
@@ -1,10 +1,11 @@
 .book-subnavigation {
   &__item {
     @include small-text;
+    line-height: 2;
     margin-bottom: $small-spacing;
     cursor: pointer;
 
-    color: $color-silver-dark;
+    color: $color-charcoal-dark;
 
     &--mobile {
       color: $color-white;
diff --git a/client/src/styles/_default-layout.scss b/client/src/styles/_default-layout.scss
index 0fa55e54..3576be7c 100644
--- a/client/src/styles/_default-layout.scss
+++ b/client/src/styles/_default-layout.scss
@@ -6,6 +6,7 @@
 
   margin: 0 auto;
   width: 100%;
+
   /*
    * For IE10+
    */
@@ -19,8 +20,6 @@
   min-height: 100vh;
   grid-auto-rows: 1fr;
 
-
-
   &--show-filter {
     grid-template-rows: auto auto 1fr $footer-height;
     -ms-grid-rows: 50px 50px 30px 1fr $footer-height; // 1 extra row for gap
diff --git a/client/src/styles/_mixins.scss b/client/src/styles/_mixins.scss
index 9f4e1589..012764e0 100644
--- a/client/src/styles/_mixins.scss
+++ b/client/src/styles/_mixins.scss
@@ -114,7 +114,8 @@
 @mixin small-text {
   font-family: $sans-serif-font-family;
   font-weight: 400;
-  font-size: toRem(16px);
+  //font-size: toRem(16px); todo: did this really change or is this only for the subnavigation
+  font-size: toRem(14px);
 }
 
 @mixin aside-text {
@@ -127,6 +128,13 @@
   font-weight: 600;
 }
 
+@mixin navigation-link {
+  font-family: $sans-serif-font-family;
+  color: $color-charcoal-dark;
+  font-size: toRem(18px);
+  font-weight: 600;
+}
+
 @mixin meta-title {
   color: $color-silver-dark;
   font-size: toRem(36px);
@@ -152,10 +160,9 @@
 }
 
 @mixin default-link {
-  font-size: toRem(18px);
+  font-size: toRem(14px);
   font-family: $sans-serif-font-family;
   font-weight: $font-weight-regular;
-  color: $color-silver-dark;
   cursor: pointer;
 
   &--active {
diff --git a/client/src/styles/_navigation.scss b/client/src/styles/_navigation.scss
index 4139c3a6..1e6f07e1 100644
--- a/client/src/styles/_navigation.scss
+++ b/client/src/styles/_navigation.scss
@@ -1,4 +1,4 @@
-.top-navigation {
+.content-navigation {
   display: flex;
 
   &__link {