restyle global layout .. again :D

assets/stylesheets/global/header.css

@@ -15,19 +15,20 @@
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
 
     font-size: 0.8em;
-
-    @media (--breakpoint-desktop) {
-      justify-content: space-between;
-    }
   }
 
   @element upper-first {
+    flex: 1 1 auto;
     display: flex;
+    justify-content: space-between;
+    margin-bottom: calc(var(--grid-gutter) / 2);
 
     @media (--breakpoint-desktop) {
+      flex: 0 1 auto;
+      margin-bottom: 0;
       & div + div {
         margin-left: var(--grid-gutter);
       }
@@ -35,9 +36,13 @@
   }
 
   @element upper-second {
+    flex: 1 1 auto;
     display: flex;
+    justify-content: space-between;
+
 
     @media (--breakpoint-desktop) {
+      flex: 0 1 auto;
       & div + div {
         margin-left: var(--grid-gutter);
       }
@@ -105,7 +110,7 @@
 
   @element controls {
     display: flex;
-    flex: 0 0 100%;
+    flex: 1 1 auto;
     flex-direction: column;
     justify-content: space-around;
     color: var(--color-header-upper-text-primary);

assets/stylesheets/layout/layout-centered.css

@@ -1,14 +1,10 @@
 @block layout-centered {
-  box-sizing: border-box;
-  width: 100%;
   max-width: var(--content-max-width);
   margin: 0 auto;
   padding: 0 2vw;
 }
 
 @block layout-centered-small {
-  box-sizing: border-box;
-  width: 100%;
   max-width: calc(var(--content-max-width) - 360px);
   margin: 0 auto;
   padding: 0 2vw;

public/stylesheets/style.css

@@ -838,18 +838,12 @@ input[type="reset"]:focus,
 }
 
 .layout-centered {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  width: 100%;
   max-width: 980px;
   margin: 0 auto;
   padding: 0 2vw;
 }
 
 .layout-centered-small {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  width: 100%;
   max-width: 620px;
   margin: 0 auto;
   padding: 0 2vw;
@@ -978,43 +972,60 @@ display: flex;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
-    -webkit-box-pack: center;
-        -ms-flex-pack: center;
-            justify-content: center;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
 
     font-size: 0.8em;
 }
 
-@media (min-width: 700px) {
-
-  .header__upper {
-    -webkit-box-pack: justify;
-        -ms-flex-pack: justify;
-            justify-content: space-between;
-  }
-}
-
 .header__upper-first {
+    -webkit-box-flex: 1;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    margin-bottom: 11px;
 }
 
 @media (min-width: 700px) {
 
+  .header__upper-first {
+    -webkit-box-flex: 0;
+        -ms-flex: 0 1 auto;
+            flex: 0 1 auto;
+    margin-bottom: 0;
+  }
+
   .header__upper-first div + div {
     margin-left: 22px;
   }
 }
 
 .header__upper-second {
+    -webkit-box-flex: 1;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
 }
 
 @media (min-width: 700px) {
 
+  .header__upper-second {
+    -webkit-box-flex: 0;
+        -ms-flex: 0 1 auto;
+            flex: 0 1 auto;
+  }
+
   .header__upper-second div + div {
     margin-left: 22px;
   }
@@ -1108,9 +1119,9 @@ display: flex;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
-    -webkit-box-flex: 0;
-        -ms-flex: 0 0 100%;
-            flex: 0 0 100%;
+    -webkit-box-flex: 1;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;