Make header & footer components look like Notify

Notify has 4 columns of links in the footer and
its header navigation aligns to the right on
desktop.

app/assets/stylesheets/govuk-frontend/_all.scss

@@ -19,3 +19,9 @@ $govuk-assets-path: "/static/";
 
 @import "utilities/all";
 @import "overrides/all";
+
+// Styles extending those from GOV.UK Frontend
+@import './extensions';
+
+// Styles for GOV.UK Frontend components specific to this application
+@import './overrides';

app/assets/stylesheets/govuk-frontend/extensions.scss

@@ -0,0 +1,9 @@
+// Extends footer column styles to allow 4 columns
+@include mq ($from: desktop) {
+  .govuk-footer__list--columns-4 {
+    // TODO: Move support for legacy properties to something like Post-CSS's auto-prefixer
+    -webkit-column-count: 4;
+    -moz-column-count: 4;
+    column-count: 4;
+  }
+}

app/assets/stylesheets/govuk-frontend/overrides.scss

@@ -0,0 +1,12 @@
+// Overrides for certain GOV.UK Frontend styles to make its components match this application's design
+
+// Notify's header navigation aligns to the right
+.govuk-header__navigation {
+  text-align: right;
+
+  // reset the alignment of each item to left-to-right
+  .govuk-header__navigation-item {
+    text-align: left;
+  }
+
+}