Reorder container to be desktop first

This allows browsers that do not support media queries to be centered without a separate stylesheet.

Since the header and the footer component use this container it also fixes centering for these components.

src/objects/_width-container.scss

@@ -2,22 +2,23 @@
   // Limit the width of the container to the page width
   max-width: $govuk-page-width;
 
-  @include govuk-if-ie8 {
-    width: $govuk-page-width;
-  }
-
-  // On mobile, add half width gutters
-  margin: 0 $govuk-gutter-half;
+  // On desktop, center the content in the page
+  margin: 0 auto;
 
   // On tablet, add full width gutters
-  @include govuk-media-query($from: tablet) {
+  // Until when the viewport is greater than the width of the page plus the
+  // gutters.
+  @include govuk-media-query($from: tablet, $until: $govuk-page-width + $govuk-gutter * 2) {
     margin: 0 $govuk-gutter;
   }
 
-  // As soon as the viewport is greater than the width of the page plus the
-  // gutters, just centre the content instead of adding gutters.
-  @include govuk-media-query($and: "(min-width: #{($govuk-page-width + $govuk-gutter * 2)})") {
-    margin: 0 auto;
+  // On mobile, add half width gutters
+  @include govuk-media-query($until: tablet) {
+    margin: 0 $govuk-gutter-half;
+  }
+
+  @include govuk-if-ie8 {
+    width: $govuk-page-width;
   }
 }