Skatepark: apply wide width to header (#4464)

* Apply wide width to header.

* Comments.

skatepark/assets/theme.css

@@ -533,6 +533,12 @@ a:not(.ab-item):not(.screen-reader-shortcut):focus {
 	mask-image: url(svg/post-tag.svg);
 }
 
+header.wp-block-template-part {
+	max-width: var(--wp--custom--layout--wide-size);
+	margin: 0 auto;
+	width: 100%;
+}
+
 header.wp-block-template-part > .wp-block-group {
 	align-items: flex-end;
 	justify-content: space-between;

skatepark/block-template-parts/header.html

@@ -1,4 +1,4 @@
-<!-- wp:group { "layout":{"type":"flex"},"align":"full"} -->
+<!-- wp:group { "layout":{"type":"flex"}} -->
 <div class="wp-block-group">
 <!-- wp:group -->
 <div class="wp-block-group">

skatepark/sass/templates/_header.scss

@@ -1,19 +1,25 @@
-header.wp-block-template-part > .wp-block-group {
-	align-items: flex-end; // Needed until theme.json layout lets me specify
-	justify-content: space-between; // Apply a cluster (flex?) layout
-	flex-wrap: wrap-reverse;
-	> * {
-		flex-grow: 1; // Needed to maintain alignment when the containers stack
-		> * { // Apply a stack layout (page 69 of the every-layout.dev PDF) 
-			margin-top: 20px;
-			margin-bottom: 20px;
+header.wp-block-template-part {
+	max-width: var(--wp--custom--layout--wide-size); // Layouts can be flex OR flow/default (inherit), not both. So we need to mimick the wide width alignment supplied by Gutenberg here.
+	margin: 0 auto;
+	width: 100%;
+	
+	> .wp-block-group {
+		align-items: flex-end; // Needed until theme.json layout lets me specify
+		justify-content: space-between; // Apply a cluster (flex?) layout
+		flex-wrap: wrap-reverse;
+		> * {
+			flex-grow: 1; // Needed to maintain alignment when the containers stack
+			> * { // Apply a stack layout (page 69 of the every-layout.dev PDF) 
+				margin-top: 20px;
+				margin-bottom: 20px;
+			}
 		}
-	}
 
-	.wp-block-social-links.is-style-logos-only {
-		margin-right: calc( -1 * ( 8px + 0.25em ) ); // Visually align social links to the right
-		> .wp-social-link {
-			padding: 0; // Needed to override Gutenberg default padding on this block style variation
+		.wp-block-social-links.is-style-logos-only {
+			margin-right: calc( -1 * ( 8px + 0.25em ) ); // Visually align social links to the right
+			> .wp-social-link {
+				padding: 0; // Needed to override Gutenberg default padding on this block style variation
+			}
 		}
 	}
 }