diff --git a/core/themes/bartik/bartik.libraries.yml b/core/themes/bartik/bartik.libraries.yml
index 3bfa3a6886ff541c29a117ee6e2e475f1ba5847a..fd82367275d5653c377f9e87a904d9ca4e921f6c 100644
--- a/core/themes/bartik/bartik.libraries.yml
+++ b/core/themes/bartik/bartik.libraries.yml
@@ -20,6 +20,7 @@ global-styling:
       css/components/forum.css: {}
       css/components/header.css: {}
       css/components/help.css: {}
+      css/components/highlighted.css: {}
       css/components/item-list.css: {}
       css/components/list-group.css: {}
       css/components/list.css: {}
diff --git a/core/themes/bartik/css/components/highlighted.css b/core/themes/bartik/css/components/highlighted.css
new file mode 100644
index 0000000000000000000000000000000000000000..d80bb8678aeb7994611a5aae8dd7b7c5e19c6ec6
--- /dev/null
+++ b/core/themes/bartik/css/components/highlighted.css
@@ -0,0 +1,12 @@
+/**
+ * @file
+ * Styles for Bartik's highlighted component.
+ */
+
+.has-featured-top .region-highlighted {
+  background: #f0f0f0;
+  background: rgba(30, 50, 10, 0.08);
+}
+.region-highlighted {
+  margin: 0 15px;
+}
diff --git a/core/themes/bartik/css/components/messages.css b/core/themes/bartik/css/components/messages.css
index aad710f61ba5972c7ab920829aaff062cc2c0bce..15a550d0b96484fc69a96b5f7aa740b67e94b405 100644
--- a/core/themes/bartik/css/components/messages.css
+++ b/core/themes/bartik/css/components/messages.css
@@ -1,18 +1,13 @@
-/* ---------------- Messages  ----------------- */
+/**
+ * @file
+ * Styles for Bartik's messages.
+ */
 
-#messages {
-  padding: 20px 0 5px;
-  margin: 0 auto;
+.messages__wrapper {
+  padding: 20px 0 5px 8px;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  margin: 8px 0;
 }
-.has-featured-top .highlighted {
-  background: #f0f0f0;
-  background: rgba(30, 50, 10, 0.08);
-}
-div.messages {
-  margin: 8px 15px 8px 23px; /* LTR */
-}
-[dir="rtl"] div.messages {
-  margin-right: 23px;
-  margin-left: 15px;
+[dir="rtl"] .messages__wrapper {
+  padding: 20px 8px 5px 0;
 }
diff --git a/core/themes/bartik/css/maintenance-page.css b/core/themes/bartik/css/maintenance-page.css
index dd473d479d4de64d59bc616ec7eccb252bdef303..1196a220e6f8eccc300a2a57b1b5910bc0fad9ea 100644
--- a/core/themes/bartik/css/maintenance-page.css
+++ b/core/themes/bartik/css/maintenance-page.css
@@ -17,8 +17,7 @@ body.maintenance-page {
 .maintenance-page #main-wrapper {
   min-height: inherit;
 }
-.maintenance-page #header,
-.maintenance-page #messages {
+.maintenance-page #header {
   width: auto;
 }
 .maintenance-page #main {
@@ -54,13 +53,6 @@ body.maintenance-page {
   line-height: 1em;
   margin-top: 0;
 }
-.maintenance-page #messages {
-  padding: 0;
-  margin-top: 30px;
-}
-.maintenance-page #messages div.messages {
-  margin: 0;
-}
 @media all and (min-width: 800px) {
   .maintenance-page #page-wrapper {
     width: 800px;
@@ -69,10 +61,6 @@ body.maintenance-page {
   .maintenance-page #main {
     width: 700px;
   }
-  .maintenance-page #messages div.section {
-    padding: 0;
-    width: auto;
-  }
 }
 @media all and (min-width: 600px) { /* @TODO find the proper breakpoint */
   .maintenance-page #page {
diff --git a/core/themes/bartik/templates/status-messages.html.twig b/core/themes/bartik/templates/status-messages.html.twig
index 96188d32454347775d6a572a1bb6d5f0b2a80c9b..62dc6355e90bad99b2d0c0b534d9ef89cf3db3c0 100644
--- a/core/themes/bartik/templates/status-messages.html.twig
+++ b/core/themes/bartik/templates/status-messages.html.twig
@@ -25,10 +25,8 @@
 {% block messages %}
   {% if message_list is not empty %}
     {{ attach_library('bartik/messages') }}
-    <div id="messages">
-      <div class="section clearfix">
-        {{ parent() }}
-      </div>
+    <div class="messages__wrapper layout-container">
+      {{ parent() }}
     </div>
   {% endif %}
 {% endblock messages %}