diff --git a/core/modules/system/templates/install-page.html.twig b/core/modules/system/templates/install-page.html.twig
index 24d17fa..8425c74 100644
--- a/core/modules/system/templates/install-page.html.twig
+++ b/core/modules/system/templates/install-page.html.twig
@@ -14,15 +14,10 @@
   <div class="layout-container">
 
     <header role="banner">
-      {% if site_name or site_slogan %}
-        <div class="name-and-slogan">
-          {% if site_name %}
-            <h1>{{ site_name }}</h1>
-          {% endif %}
-          {% if site_slogan %}
-            <div class="site-slogan">{{ site_slogan }}</div>
-          {% endif %}
-        </div>{# /.name-and-slogan #}
+      {% if site_name %}
+        <div class="site-name">
+          <h1>{{ site_name }}</h1>
+        </div>
       {% endif %}
     </header>
 
diff --git a/core/modules/system/templates/maintenance-page.html.twig b/core/modules/system/templates/maintenance-page.html.twig
index fd780d4..765a2c9 100644
--- a/core/modules/system/templates/maintenance-page.html.twig
+++ b/core/modules/system/templates/maintenance-page.html.twig
@@ -20,18 +20,12 @@
       </a>
     {% endif %}
 
-    {% if site_name or site_slogan %}
-      <div class="name-and-slogan">
-        {% if site_name %}
-         <h1 class="site-name">
-           <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
-         </h1>
-        {% endif %}
-
-        {% if site_slogan %}
-          <div class="site-slogan">{{ site_slogan }}</div>
-        {% endif %}
-      </div>{# /.name-and-slogan #}
+    {% if site_name %}
+      <div class="site-name">
+       <h1>
+         <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
+       </h1>
+      </div>
     {% endif %}
 
   </header>
diff --git a/core/modules/system/templates/page.html.twig b/core/modules/system/templates/page.html.twig
index d24e33c..78370cd 100644
--- a/core/modules/system/templates/page.html.twig
+++ b/core/modules/system/templates/page.html.twig
@@ -74,18 +74,16 @@
 
     {% if site_name or site_slogan %}
       <div class="name-and-slogan">
-
+        <div class="site-name">
         {# Use h1 when the content title is empty #}
-        {% if title %}
-          <strong class="site-name">
-            <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
-          </strong>
-        {% else %}
-          <h1 class="site-name">
+          {% if title %}
             <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
-          </h1>
-        {% endif %}
-
+          {% else %}
+            <h1>
+              <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
+            </h1>
+          {% endif %}
+        </div>
         {% if site_slogan %}
           <div class="site-slogan">{{ site_slogan }}</div>
         {% endif %}
diff --git a/core/themes/bartik/css/layout.css b/core/themes/bartik/css/layout.css
index 1fadfc2..cac38d4 100644
--- a/core/themes/bartik/css/layout.css
+++ b/core/themes/bartik/css/layout.css
@@ -40,8 +40,7 @@ body,
 #main-wrapper {
   min-height: 300px;
 }
-#content .section,
-.sidebar .section {
+.section {
   padding: 0 15px;
 }
 .breadcrumb {
@@ -54,7 +53,6 @@ body,
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  padding: 0 15px;
 }
 .region-triptych-first,
 .region-triptych-middle,
diff --git a/core/themes/bartik/css/maintenance-page.css b/core/themes/bartik/css/maintenance-page.css
index ce5c9f5..58f782d 100644
--- a/core/themes/bartik/css/maintenance-page.css
+++ b/core/themes/bartik/css/maintenance-page.css
@@ -24,23 +24,19 @@ body.maintenance-page {
 .maintenance-page #main {
   margin: 0;
 }
-.maintenance-page #content .section {
-  padding: 0 0 0 10px;
-}
 .maintenance-page #header {
   background-color: #fff;
   background-image: none;
 }
-.maintenance-page #name-and-slogan {
-  margin-bottom: 50px;
+.maintenance-page .site-name {
+  margin-bottom: 30px;
   margin-left: 0;
   padding-top: 20px;
   font-size: 90%;
 }
-.maintenance-page #name-and-slogan,
-.maintenance-page #name-and-slogan a,
-.maintenance-page #name-and-slogan a:hover,
-.maintenance-page #name-and-slogan a:focus {
+.maintenance-page .site-name a,
+.maintenance-page .site-name a:hover,
+.maintenance-page .site-name a:focus {
   color: #777;
 }
 .maintenance-page  h1#page-title {
diff --git a/core/themes/bartik/css/style.css b/core/themes/bartik/css/style.css
index 119ef78..ba5a7f9 100644
--- a/core/themes/bartik/css/style.css
+++ b/core/themes/bartik/css/style.css
@@ -115,7 +115,6 @@ pre {
 /* ------------------ Fonts ------------------ */
 
 body,
-#site-slogan,
 .site-slogan,
 #page .ui-widget,
 .comment-form label,
@@ -372,24 +371,19 @@ ul.tips {
   margin: 0 15px 30px 0;
 }
 
-#site-name,
-.site-name {
+.site-name h1 {
   font-size: 1.6em;
   color: #686868;
   line-height: 1;
-}
-h1#site-name,
-h1.site-name {
   margin: 0;
 }
-#site-name a,
-.site-name a {
+.site-name span {
   font-weight: normal;
+  font-size: 1.6em;
 }
-#site-slogan,
 .site-slogan {
   font-size: 0.929em;
-  margin-top: 7px;
+  margin-top: 2px;
   word-spacing: 0.1em;
   font-style: italic;
 }
@@ -1928,9 +1922,8 @@ div.admin-panel .description {
   [dir="rtl"] .site-branding-text {
     margin: 0 15px 30px 0;
   }
-  #site-name,
-  .site-name {
-    font-size: 1.821em;
+  .site-name span {
+    font-size: 1.8em;
   }
   #main-menu-links {
     font-size: 0.929em;
diff --git a/core/themes/bartik/templates/maintenance-page.html.twig b/core/themes/bartik/templates/maintenance-page.html.twig
index 5de50cc..88ef779 100644
--- a/core/themes/bartik/templates/maintenance-page.html.twig
+++ b/core/themes/bartik/templates/maintenance-page.html.twig
@@ -11,21 +11,12 @@
   <div id="page-wrapper"><div id="page">
 
     <header id="header" role="banner"><div class="section clearfix">
-      {% if site_name or site_slogan %}
-        <div id="name-and-slogan"{{ hide_site_name and hide_site_slogan ? ' class="visually-hidden"' }}>
-          {% if site_name %}
-            <div id="site-name"{{ hide_site_name ? ' class="visually-hidden"' }}>
-              <strong>
-                <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home"><span>{{ site_name }}</span></a>
-              </strong>
-            </div>
-          {% endif %}
-          {% if site_slogan %}
-            <div id="site-slogan"{{ hide_site_slogan ? ' class="visually-hidden"' }}>
-              {{ site_slogan }}
-            </div>
-          {% endif %}
-        </div> <!-- /#name-and-slogan -->
+      {% if site_name %}
+        <div class="site-name{{ hide_site_name ? ' visually-hidden' }}">
+          <h1>
+            <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home"><span>{{ site_name }}</span></a>
+          </h1>
+        </div>
       {% endif %}
     </div></header> <!-- /.section, /#header -->
 
diff --git a/core/themes/bartik/templates/page.html.twig b/core/themes/bartik/templates/page.html.twig
index 8c739bb..bd57052 100644
--- a/core/themes/bartik/templates/page.html.twig
+++ b/core/themes/bartik/templates/page.html.twig
@@ -96,21 +96,21 @@
       <div id="name-and-slogan"{% if hide_site_name and hide_site_slogan %} class="visually-hidden"{% endif %}>
         {% if site_name %}
           {% if title %}
-            <div id="site-name"{% if hide_site_name %} class="visually-hidden"{% endif %}>
+            <div class="site-name{% if hide_site_name %} visually-hidden{% endif %}">
               <strong>
                 <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home"><span>{{ site_name }}</span></a>
               </strong>
             </div>
           {# Use h1 when the content title is empty #}
           {% else %}
-            <h1 id="site-name"{% if hide_site_name %} class="visually-hidden" {% endif %}>
+            <h1 class="site-name{% if hide_site_name %} visually-hidden{% endif %}">
               <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home"><span>{{ site_name }}</span></a>
             </h1>
           {% endif %}
         {% endif %}
 
         {% if site_slogan %}
-          <div id="site-slogan"{% if hide_site_slogan %} class="visually-hidden"{% endif %}>
+          <div class="site-slogan{% if hide_site_name %} visually-hidden{% endif %}">
             {{ site_slogan }}
           </div>
         {% endif %}
diff --git a/core/themes/seven/maintenance-page.css b/core/themes/seven/maintenance-page.css
index fb1e3a0..61bf6e8 100644
--- a/core/themes/seven/maintenance-page.css
+++ b/core/themes/seven/maintenance-page.css
@@ -18,10 +18,11 @@
 .in-maintenance {
   background: none;
 }
-.name-and-slogan h1 {
+.site-name > h1 {
   font-size: 2em;
   line-height: 1.2em;
   color: #0074bd;
+  word-wrap: break-word;
 }
 
 /**
@@ -39,7 +40,7 @@
     right: 0.5em;
   }
   [dir="rtl"] .step-indicator {
-    left: 2em;
+    left: 0;
     right: auto;
   }
   .task-list {
@@ -118,9 +119,16 @@
     margin: 1.25em;
     padding: 10px 20px;
   }
-  .name-and-slogan {
-    margin: 0 0 1.45em 0;
+  .site-name {
+    margin-right: 4em;
+    margin-bottom: 1.5em;
   }
+
+  [dir="rtl"] .site-name {
+    margin-right: 0em;
+    margin-left: 2em;
+  }
+
 }
 
 @media all and (min-width: 48em) { /* 768px */
@@ -174,11 +182,11 @@
   }
 
   /* Margins for sitename */
-  h1.page-title,
-  .name-and-slogan h1 {
-    margin: 0.75em 0 0.75em 1.9em; /* LTR */
+  .site-name  {
+    margin: 1.5em 1em 1.5em 3.85em; /* LTR */
   }
-  [dir="rtl"] .name-and-slogan h1 {
-    margin: 0.75em 1.9em 0.75em 0;
+  [dir="rtl"] .site-name  {
+    margin: 1.5em 3.85em 1.5em 1em;
   }
+
 }
diff --git a/core/themes/seven/templates/install-page.html.twig b/core/themes/seven/templates/install-page.html.twig
index 98b3f8a..c014cb4 100644
--- a/core/themes/seven/templates/install-page.html.twig
+++ b/core/themes/seven/templates/install-page.html.twig
@@ -12,15 +12,10 @@
 <div class="layout-container">
 
   <header role="banner">
-    {% if site_name or site_slogan %}
-      <div class="name-and-slogan">
-        {% if site_name %}
-          <h1>{{ site_name }}</h1>
-        {% endif %}
-        {% if site_slogan %}
-          <div class="site-slogan">{{ site_slogan }}</div>
-        {% endif %}
-      </div>{# /.name-and-slogan #}
+    {% if site_name %}
+      <div class="site-name">
+        <h1>{{ site_name }}</h1>
+      </div>
     {% endif %}
   </header>
 
diff --git a/core/themes/seven/templates/maintenance-page.html.twig b/core/themes/seven/templates/maintenance-page.html.twig
index 01bc89b..5869fad 100644
--- a/core/themes/seven/templates/maintenance-page.html.twig
+++ b/core/themes/seven/templates/maintenance-page.html.twig
@@ -12,15 +12,10 @@
 <div class="layout-container">
 
   <header role="banner">
-    {% if site_name or site_slogan %}
-      <div class="name-and-slogan">
-        {% if site_name %}
-          <h1>{{ site_name }}</h1>
-        {% endif %}
-        {% if site_slogan %}
-          <div class="site-slogan">{{ site_slogan }}</div>
-        {% endif %}
-      </div>{# /.name-and-slogan #}
+    {% if site_name %}
+      <div class="site-name">
+        <h1>{{ site_name }}</h1>
+      </div>
     {% endif %}
   </header>