Hever: Fix header padding on mobile screens.

hever/sass/_extra-child-theme.scss

@@ -24,24 +24,24 @@ a {
  */
 #masthead,
 #colophon {
+	padding-left: 16px;
+	padding-right: 16px;
 	position: relative;
-
 	@extend %responsive-alignwide;
+
+	@include media(mobile) {
+		padding-left: 0;
+		padding-right: 0;
+	}
 }
 
 #masthead {
-	padding-left: 0;
-	padding-right: 0;
 	padding-bottom: 0;
 }
 
 #colophon {
 	margin-left: auto;
 	margin-right: auto;
-
-	@include media(mobile-only) {
-		padding: 0;
-	}
 }
 
 /**

hever/style-rtl.css

@@ -3449,12 +3449,20 @@ p:not(.site-title) a:hover {
  */
 #masthead,
 #colophon {
+	padding-right: 16px;
+	padding-left: 16px;
 	position: relative;
 }
 
+@media only screen and (min-width: 560px) {
+	#masthead,
+	#colophon {
+		padding-right: 0;
+		padding-left: 0;
+	}
+}
+
 #masthead {
-	padding-right: 0;
-	padding-left: 0;
 	padding-bottom: 0;
 }
 
@@ -3463,12 +3471,6 @@ p:not(.site-title) a:hover {
 	margin-left: auto;
 }
 
-@media only screen and (max-width: 559px) {
-	#colophon {
-		padding: 0;
-	}
-}
-
 /**
  * Mobile-Menu
  */

hever/style.css

@@ -3466,12 +3466,20 @@ p:not(.site-title) a:hover {
  */
 #masthead,
 #colophon {
+	padding-left: 16px;
+	padding-right: 16px;
 	position: relative;
 }
 
+@media only screen and (min-width: 560px) {
+	#masthead,
+	#colophon {
+		padding-left: 0;
+		padding-right: 0;
+	}
+}
+
 #masthead {
-	padding-left: 0;
-	padding-right: 0;
 	padding-bottom: 0;
 }
 
@@ -3480,12 +3488,6 @@ p:not(.site-title) a:hover {
 	margin-right: auto;
 }
 
-@media only screen and (max-width: 559px) {
-	#colophon {
-		padding: 0;
-	}
-}
-
 /**
  * Mobile-Menu
  */