Update mobile menu header styling and spacings

src/components/navigation/menu-language/menu-language.scss

@@ -3,8 +3,12 @@
   display: flex;
   flex-flow: row;
   position: absolute;
-  right: 0;
+  right: 16px;
   top: 0;
+
+  @include breakpoint($narrow) {
+    right: 28px;
+  }
 }
 
 :host(.menu--language:not([is-mobile])) {

src/components/navigation/menu/menu.scss

@@ -11,7 +11,6 @@
     flex-flow: column;
     justify-items: stretch;
     left: 0;
-    padding: 20px 32px 0;
     position: absolute;
     right: 0;
     top: 0;
@@ -73,7 +72,11 @@
 
   &__logo-container {
     display: inline-block;
-    margin: 5px 0 20px;
+    padding: 16px;
+
+    @include breakpoint($narrow) {
+      padding: 16px 28px;
+    }
   }
 
   &--sidenav {

src/components/site-header/site-header.scss

@@ -32,7 +32,7 @@
     margin: 16px 8px;
 
     @include breakpoint($narrow) {
-      margin: 16px 16px 16px 24px;
+      margin: 16px 16px 16px 28px;
     }
 
     @include breakpoint($wide) {
@@ -82,17 +82,19 @@
     padding: 15px 16px 15px 12px;
 
     @include breakpoint($narrow) {
-      padding: 15px 32px 15px 10px;
+      padding: 15px 28px 15px 10px;
     }
 
     &.is-open {
-      margin: 10px;
-      padding: 10px;
       position: absolute;
       right: 0;
-      //top: 10px;
-      top: 17px;
+      top: 32px;
+      transform: translateY(-50%);
       z-index: 101;
+
+      @include breakpoint($narrow) {
+        top: 40px;
+      }
     }
 
     &__label {