diff --git a/core/themes/bartik/bartik.libraries.yml b/core/themes/bartik/bartik.libraries.yml
index 009a67f..ae1eacb 100644
--- a/core/themes/bartik/bartik.libraries.yml
+++ b/core/themes/bartik/bartik.libraries.yml
@@ -32,6 +32,7 @@ global-styling:
       css/components/shortcut.css: {}
       css/components/skip-link.css: {}
       css/components/sidebar.css: {}
+      css/components/site-branding.css: {}
       css/components/site-footer.css: {}
       css/components/table.css: {}
       css/components/tabs.css: {}
diff --git a/core/themes/bartik/css/colors.css b/core/themes/bartik/css/colors.css
index 9946d5d..0c722b2 100644
--- a/core/themes/bartik/css/colors.css
+++ b/core/themes/bartik/css/colors.css
@@ -46,10 +46,10 @@ a:active,
 .region-header,
 .region-header a,
 .region-header li a.is-active,
-.site-branding-text,
-.site-branding-block,
-.site-branding-text a,
-.site-branding-block a,
+.site-branding__text,
+.site-branding,
+.site-branding__text a,
+.site-branding a,
 .region-secondary-menu .menu-item a {
   color: #fffeff;
 }
diff --git a/core/themes/bartik/css/components/header.css b/core/themes/bartik/css/components/header.css
index f5033f5..a949b5f 100644
--- a/core/themes/bartik/css/components/header.css
+++ b/core/themes/bartik/css/components/header.css
@@ -5,74 +5,48 @@
 .header .section {
   position: relative;
 }
-
+.region-header {
+  padding: 0 15px;
+}
+.region-header .site-branding {
+  margin-top: 0.429em;
+}
+.region-header .site-branding:only-child {
+  margin-bottom: 2.714em;
+}
+@media all and (min-width: 461px) {
+  .region-header .site-branding:only-child {
+    margin-bottom: 1.857em;
+  }
+}
 @media all and (min-width: 461px) {
   .region-header .block {
     float: right; /* LTR */
+    margin-top: 0.714em;
   }
   [dir="rtl"] .region-header .block {
     float: left;
   }
-  .region-header .branding {
+  .region-header .site-branding {
     float: left; /* LTR */
+    margin-bottom: 1.857em;
   }
-  [dir="rtl"] .region-header .branding {
+  [dir="rtl"] .region-header .site-branding {
     float: right;
   }
 }
 
-.site-logo {
-  float: left; /* LTR */
-  padding: 4px 10px 10px 0; /* LTR */
-}
-[dir="rtl"] .site-logo {
-  padding: 4px 0 10px 20px;
-}
-
-@media all and (min-width: 901px) {
-  .site-logo {
-    padding: 9px 4px 0 10px; /* LTR */
-  }
-  [dir="rtl"] .site-logo {
-    padding: 9px 9px 4px 4px;
-  }
-}
-.site-branding-text {
-  float: left; /* LTR */
-  margin: 0 0 30px 15px;
-  padding: 30px 0 0 0;
-}
-[dir="rtl"] .site-branding-text {
-  margin: 0 15px 30px 0;
-}
-
-.site-name {
-  font-size: 1.6em;
-  color: #686868;
-  line-height: 1;
+/* Region header blocks. */
+.region-header .block:not(.site-branding) {
+  font-size: 0.857em;
+  margin: 0 0 1em;
+  clear: right;
 }
 @media all and (min-width: 901px) {
-  .site-name {
-    font-size: 1.821em;
+  .region-header .block:not(.site-branding) {
+    margin: 1.167em 0 1em;
   }
 }
-h1.site-name {
-  margin: 0;
-}
-.site-name a {
-  font-weight: normal;
-}
-.site-slogan {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 0.929em;
-  margin-top: 7px;
-  word-spacing: 0.1em;
-  font-style: italic;
-}
-/* Region header blocks. */
-.region-header .block {
-  font-size: 0.857em;
-}
 .region-header .block > h2 {
   /* @extend .visually-hidden */
   position: absolute !important;
@@ -206,6 +180,10 @@ h1.site-name {
 .region-header #block-search-form .form-text {
   width: 154px;
 }
+.region-header .search-block-form {
+  float: right;
+}
+
 /* Language switcher block in header region. */
 .region-header .block-locale ul li {
   display: inline;
diff --git a/core/themes/bartik/css/components/site-branding.css b/core/themes/bartik/css/components/site-branding.css
new file mode 100644
index 0000000..dd5e993
--- /dev/null
+++ b/core/themes/bartik/css/components/site-branding.css
@@ -0,0 +1,41 @@
+/**
+ * @file
+ * Visual styles for the Site Branding block in Bartik.
+ */
+
+.site-branding__logo {
+  display: inline-block;
+  margin-right: 0.857em; /* LTR */
+  margin-bottom: 0.286em;
+}
+[dir="rtl"] .site-branding__logo {
+  margin-right: 0;
+  margin-left: 0.857em;
+}
+.site-branding__text {
+  display: inline-block;
+  vertical-align: top;
+}
+@media all and (min-width: 901px) {
+  .site-branding__text {
+    vertical-align: bottom;
+    padding-bottom: 0.286em;
+  }
+}
+.site-branding__name {
+  font-size: 1.6em;
+  color: #686868;
+  line-height: 1;
+}
+@media all and (min-width: 901px) {
+  .site-branding__name {
+    font-size: 1.821em;
+  }
+}
+.site-branding__slogan {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 0.929em;
+  margin-top: 7px;
+  word-spacing: 0.1em;
+  font-style: italic;
+}
diff --git a/core/themes/bartik/templates/block--system-branding-block.html.twig b/core/themes/bartik/templates/block--system-branding-block.html.twig
index 44ff621..9bf4f3d 100644
--- a/core/themes/bartik/templates/block--system-branding-block.html.twig
+++ b/core/themes/bartik/templates/block--system-branding-block.html.twig
@@ -13,22 +13,22 @@
  * - site_slogan: Slogan for site as defined in Site information settings.
  */
 #}
-{% set attributes = attributes.addClass('branding') %}
+{% set attributes = attributes.addClass('site-branding') %}
 {% block content %}
   {% if site_logo %}
-    <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home" class="site-logo">
+    <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home" class="site-branding__logo">
       <img src="{{ site_logo }}" alt="{{ 'Home'|t }}" />
     </a>
   {% endif %}
   {% if site_name or site_slogan %}
-    <div class="site-branding-text">
+    <div class="site-branding__text">
       {% if site_name %}
-        <strong class="site-name">
+        <div class="site-branding__name">
           <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
-        </strong>
+        </div>
       {% endif %}
       {% if site_slogan %}
-        <div class="site-slogan">{{ site_slogan }}</div>
+        <div class="site-branding__slogan">{{ site_slogan }}</div>
       {% endif %}
     </div>
   {% endif %}