paddings in mobile menu panel

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

@@ -2,12 +2,10 @@
 :host(.hy-menu-item--mobile) {
   --menu-item-display: flex;
   display: flex;
-  margin-left: 12px;
-  margin-right: 12px;
-  margin: 0 12px 5px;
+  margin-bottom: 5px;
 
   @include breakpoint($narrow) {
-    margin: 0 28px 6px;
+    margin-bottom: 6px;
   }
 }
 
@@ -70,7 +68,6 @@
 
     &.hy-menu-item--mobile {
       background: linear-gradient(270deg, var(--grayscale-background-box) 0%, var(--grayscale-light) 100%);
-      //color: var(--brand-main-light);
       color: var(--link-blue);
       padding: 14px 12px 14px 20px;
 

src/components/navigation/menu-level-container/menu-level-container.scss

@@ -26,15 +26,10 @@
         content: '';
         display: block;
         height: 3px;
-        left: 12px;
+        left: 0;
         position: absolute;
-        right: 12px;
+        right: 0;
         top: 0;
-
-        @include breakpoint($narrow) {
-          left: 28px;
-          right: 28px;
-        }
       }
     }
 

src/components/navigation/menu/menu.scss

@@ -49,13 +49,16 @@
   &--mobile {
     -webkit-overflow-scrolling: touch;
     flex-flow: column;
-    padding-left: 12px;
-    padding-right: 12px;
+    padding: 0 16px;
     transform: translateX(100%);
     transition: 0.45s;
     width: 100%;
     z-index: 100;
 
+    @include breakpoint($narrow) {
+      padding: 0 28px;
+    }
+
     @include breakpoint($extrawide) {
       &:not(.is-demo) {
         min-height: 0;

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

@@ -181,12 +181,13 @@
   width: 0;
 
   &.is-open {
-    padding: 20px;
+    padding: 20px 16px;
     visibility: visible;
     width: 90%;
     z-index: 100;
 
     @include breakpoint($narrow) {
+      padding: 20px 28px;
       width: 400px;
     }
   }