From 645d7354b3dc72db8c9e29633e9719172345ce78 Mon Sep 17 00:00:00 2001
From: Nick Colley <nick.colley@digital.cabinet-office.gov.uk>
Date: Tue, 3 Dec 2019 17:16:03 +0000
Subject: [PATCH 1/2] Update width-container to only set required properties

To avoid issues with specificity when people are using their own custom width containers we can set only the properties that are required.

This also mirrors how we are setting margins in the rest of the object.

Fixes https://github.com/alphagov/govuk-frontend/issues/1658
---
 src/govuk/objects/_width-container.scss   | 15 ++++++++++-----
 src/govuk/objects/width-container.test.js | 12 ++++++++----
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/govuk/objects/_width-container.scss b/src/govuk/objects/_width-container.scss
index 1938abf7fa..e5b145ea81 100644
--- a/src/govuk/objects/_width-container.scss
+++ b/src/govuk/objects/_width-container.scss
@@ -25,7 +25,8 @@
   max-width: $width;
 
   // On mobile, add half width gutters
-  margin: 0 $govuk-gutter-half;
+  margin-right: $govuk-gutter-half;
+  margin-left: $govuk-gutter-half;
 
   // Respect 'display cutout' safe area (avoids notches and rounded corners)
   @supports (margin: unquote("max(calc(0px))")) {
@@ -40,7 +41,8 @@
 
   // On tablet, add full width gutters
   @include govuk-media-query($from: tablet) {
-    margin: 0 $govuk-gutter;
+    margin-right: $govuk-gutter;
+    margin-left: $govuk-gutter;
 
     // Respect 'display cutout' safe area (avoids notches and rounded corners)
     @supports (margin: unquote("max(calc(0px))")) {
@@ -57,12 +59,14 @@
   // 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: #{($width + $govuk-gutter * 2)})") {
-    margin: 0 auto;
+    margin-right: auto;
+    margin-left: auto;
 
     // Since a safe area may have previously been set above,
     // we need to duplicate this margin that centers the page.
     @supports (margin: unquote("max(calc(0px))")) {
-      margin: 0 auto;
+      margin-right: auto;
+      margin-left: auto;
     }
   }
 
@@ -70,7 +74,8 @@
     width: $width;
     // Since media queries are not supported in IE8,
     // we need to duplicate this margin that centers the page.
-    margin: 0 auto;
+    margin-right: auto;
+    margin-left: auto;
   }
 }
 
diff --git a/src/govuk/objects/width-container.test.js b/src/govuk/objects/width-container.test.js
index ef1add3739..152884e11a 100644
--- a/src/govuk/objects/width-container.test.js
+++ b/src/govuk/objects/width-container.test.js
@@ -25,24 +25,28 @@ describe('@mixin govuk-width-container', () => {
       .toContain(outdent`
       .app-width-container--wide {
         max-width: 1200px;
-        margin: 0 15px; }
+        margin-right: 15px;
+        margin-left: 15px; }
         @supports (margin: max(calc(0px))) {
           .app-width-container--wide {
             margin-right: max(15px, calc(15px + env(safe-area-inset-right)));
             margin-left: max(15px, calc(15px + env(safe-area-inset-left))); } }
         @media (min-width: 40.0625em) {
           .app-width-container--wide {
-            margin: 0 30px; }
+            margin-right: 30px;
+            margin-left: 30px; }
             @supports (margin: max(calc(0px))) {
               .app-width-container--wide {
                 margin-right: max(30px, calc(15px + env(safe-area-inset-right)));
                 margin-left: max(30px, calc(15px + env(safe-area-inset-left))); } } }
         @media (min-width: 1260px) {
           .app-width-container--wide {
-            margin: 0 auto; }
+            margin-right: auto;
+            margin-left: auto; }
             @supports (margin: max(calc(0px))) {
               .app-width-container--wide {
-                margin: 0 auto; } } }
+                margin-right: auto;
+                margin-left: auto; } } }
       `)
   })
 })

From 10170460dc03b665a6090a9d379822151a996f3c Mon Sep 17 00:00:00 2001
From: Nick Colley <nick.colley@digital.cabinet-office.gov.uk>
Date: Tue, 3 Dec 2019 17:19:14 +0000
Subject: [PATCH 2/2] Add CHANGELOG entry

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cc195fd77c..a66eb0aa6f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
 
 ### Fixes
 
+- [Pull request #1670: Make width-container margins more targetted to avoid specificity issues](https://github.com/alphagov/govuk-frontend/pull/1670).
 - [Pull request #1655: Ensure components use public `govuk-media-query` mixin](https://github.com/alphagov/govuk-frontend/pull/1655).
 - [Pull request #1638: Check component item arrays are not empty before outputting markup](https://github.com/alphagov/govuk-frontend/pull/1638).