diff --git a/assets/sass/patterns/organisms/side-by-side-view.scss b/assets/sass/patterns/organisms/side-by-side-view.scss
index 91e553f71..05ee1e4cc 100644
--- a/assets/sass/patterns/organisms/side-by-side-view.scss
+++ b/assets/sass/patterns/organisms/side-by-side-view.scss
@@ -5,21 +5,23 @@
   overflow: hidden;
   position: absolute;
   left: 0;
-  top: 8.6rem;
-  height: calc(100% - 8.6rem);
+  top: (40px + 1 + 54 + 40); // .site-header height + .side-by-side-view__bar height
+  top: #{get-rem-from-px(40 + 1 + 54 + 40)}rem;
+  height: calc(100% - #{(40 + 1 + 54)}px - 40px); // 100% - .site-header height - .side-by-side-view__bar height
+  height: calc(100% - #{get-rem-from-px(40 + 1 + 54)}rem - #{get-rem-from-px(40)}rem);
   width: 100%;
 }
 
 .side-by-side-view__bar {
   position: absolute;
   left: 0;
-  top: 6.2rem;
+  top: (40px + 1 + 54 + 40); // .site-header height
+  top: #{get-rem-from-px(40 + 1 + 54)}rem;
   border-top: 1px solid #e0e0e0;
   border-bottom: 1px solid #e0e0e0;
   background-color: #f7f7f7;
   width: 100%;
-  height: 40px;
-  @include font-size-and-vertical-height($font-size-base-in-px, 38);
+  @include height(40);
 }
 
 .side-by-side-view__button-close {
@@ -28,6 +30,7 @@
   font-family: $font-secondary;
   font-weight: bold;
   @include font-size(14);
+  height: 100%;
   color: $color-primary;
   padding: 0 0 0 8px;
 }
diff --git a/assets/sass/patterns/organisms/site-header.scss b/assets/sass/patterns/organisms/site-header.scss
index 01c693f8a..6283a15f4 100644
--- a/assets/sass/patterns/organisms/site-header.scss
+++ b/assets/sass/patterns/organisms/site-header.scss
@@ -1,7 +1,7 @@
 @import "../../definitions";
 
 .site-header {
-  max-height: 96px;
+  /*max-height: 96px;*/
   min-width: #{get-rem-from-px(275)}rem;
   position: relative;
   z-index: 20;
@@ -43,6 +43,7 @@
   float: left;
   position: relative;
   z-index: 21;
+  @include height(40); // .nav-secondary__list
 }
 
 .site-header__logo_link {
@@ -81,7 +82,7 @@
   .site-header__title {
     border-right: 1px solid $color-text-dividers;
     float: left;
-    @include height(95);
+    @include height(40 + 1 + 54); // .nav-secondary__list + border + .nav-primary__list
     margin-right: 10px;
     @include margin(10, "right");
     @include padding(14, "top");
@@ -95,7 +96,7 @@
     background-color: #fff;
     content: "";
     display: block;
-    height: 95px;
+    @include height(40 + 1 + 54); // .nav-secondary__list + border + .nav-primary__list
     left: 0;
     position: absolute;
     top: 0;
@@ -106,10 +107,11 @@
     background: none;
     display: block;
     float: right;
-    height: 70px;
+    max-height: 100%;
+    height: 100%;
     margin: 0;
     position: relative;
-    width: 136px;
+    width: 100%;
     z-index: 10;
   }