Brompton: Rework Header's flexbox on large screens

brompton/sass/_extra-child-theme.scss

@@ -13,7 +13,7 @@
 	display: flex;
 	flex-flow: column wrap;
 	justify-content: space-between;
-	margin-top: #{5 + map-deep-get($config-global, "spacing", "vertical")};
+	margin-top: #{2 * map-deep-get($config-global, "spacing", "vertical")};
 	max-width: 100vw;
 	min-height: #{110 - map-deep-get($config-global, "spacing", "vertical")};
 	padding-top: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
@@ -91,11 +91,12 @@
 
 	@include media(laptop) {
 		flex-flow: row wrap;
+		justify-content: flex-start;
 
 		.site-branding,
 		.main-navigation,
 		.social-navigation {
-			margin: 0;
+			margin: 0 #{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
 			width: 33.3333%;
 			width: calc(33.3333% - #{map-deep-get($config-global, "spacing", "horizontal")})
 		}

brompton/style-rtl.css

@@ -3202,11 +3202,12 @@ table th,
 @media only screen and (min-width: 782px) {
 	#masthead {
 		flex-flow: row wrap;
+		justify-content: flex-start;
 	}
 	#masthead .site-branding,
 	#masthead .main-navigation,
 	#masthead .social-navigation {
-		margin: 0;
+		margin: 0 8px;
 		width: 33.3333%;
 		width: calc(33.3333% - 16px);
 	}

brompton/style.css

@@ -3129,7 +3129,7 @@ table th,
 	display: flex;
 	flex-flow: column wrap;
 	justify-content: space-between;
-	margin-top: 37px;
+	margin-top: 64px;
 	max-width: 100vw;
 	min-height: 78px;
 	padding-top: 16px;
@@ -3207,11 +3207,12 @@ table th,
 @media only screen and (min-width: 782px) {
 	#masthead {
 		flex-flow: row wrap;
+		justify-content: flex-start;
 	}
 	#masthead .site-branding,
 	#masthead .main-navigation,
 	#masthead .social-navigation {
-		margin: 0;
+		margin: 0 8px;
 		width: 33.3333%;
 		width: calc(33.3333% - 16px);
 	}