Merge pull request #863 from alphagov/fix-main-wrapper-ie11

Set display:block on `main` wrapper

CHANGELOG.md

@@ -23,6 +23,12 @@
 
 🔧 Fixes:
 
+- Apply `display:block` to `.govuk-main-wrapper`
+
+  In IE11 `main` element is set to `display:inline` so padding
+  and margins aren't applied.
+  ([PR #863](https://github.com/alphagov/govuk-frontend/pull/863)))
+
 - Line-heights are now converted from pixels to relative 'unit-less' values
   in order to prevent issues when resizing text in the browser.
   ([PR #837](https://github.com/alphagov/govuk-frontend/pull/837) and

src/objects/_main-wrapper.scss

@@ -19,6 +19,10 @@
 @mixin govuk-main-wrapper {
   @include govuk-responsive-padding(6, "top");
   @include govuk-responsive-padding(6, "bottom");
+  // In IE11 the `main` element can be used, but is not recognized  –
+  // meaning it's not defined in IE's default style sheet,
+  // so it uses CSS initial value, which is inline.
+  display: block;
 }
 
 // Use govuk-main-wrapper--l when you page does not have Breadcrumbs, phase banners or back links