diff --git a/core/modules/outside_in/css/outside_in.module.css b/core/modules/outside_in/css/outside_in.module.css
index c9de971..d818768 100644
--- a/core/modules/outside_in/css/outside_in.module.css
+++ b/core/modules/outside_in/css/outside_in.module.css
@@ -3,7 +3,7 @@
  * Styling for Outside-In module.
  */
 
-/* Position the offcanvas tray container ouside the right of the viewport. */
+/* Position the offcanvas tray container outside the right of the viewport. */
 #offcanvas {
   box-sizing: border-box;
   height: 100%;
@@ -38,8 +38,7 @@
 
 /* Create a place to name the tray. */
 #offcanvas h1 {
-  padding: 15px;
-  padding-right: 25%; /* LTR */
+  padding: 15px 25% 15px 15px; /* LTR */
   margin-top: 0;
   margin-bottom: 0;
   font-size: 120%;
@@ -53,10 +52,7 @@
 /* Wrap the form that's inside the offcanvas tray. */
 #offcanvas > .offcanvas-content {
   height: 10000px;
-  padding-top: 0;
-  padding-right: 15px;
-  padding-left: 15px;
-  padding-bottom: 0;
+  padding: 0 15px;
 }
 [dir="rtl"] #offcanvas .offcanvas-content {
   text-align: right;
@@ -65,9 +61,9 @@
   width: 100%;
 }
 
-/* 
- * Position the edit toolbar tab. 
- * @todo Move changes into toolbar module when outside-in is not experimental. 
+/*
+ * Position the edit toolbar tab.
+ * @todo Move changes into toolbar module when outside-in is not experimental.
  */
 .toolbar .toolbar-bar .contextual-toolbar-tab.toolbar-tab {
   float: left;
@@ -83,7 +79,7 @@
     width: 300px;
     margin-right: -300px;
     padding-top: 39px;
-  } 
+  }
   /* Wrap the rest of the site so we can control it's width. */
   #main-canvas-wrapper #main-canvas {
     display: inline-block;
@@ -99,8 +95,8 @@
     width: 100%;
   }
 }
-@media (min-width: 700px) { 
-  /* Position the offcanvas tray container ouside the right of the viewport. */
+@media (min-width: 700px) {
+  /* Position the offcanvas tray container outside the right of the viewport. */
   #offcanvas {
     position: fixed;
     display: inline-block;
@@ -137,8 +133,8 @@
     width: 65%;
   }
 }
-@media (min-width: 900px) { 
-  /* Position the offcanvas tray container ouside the right of the viewport. */
+@media (min-width: 900px) {
+  /* Position the offcanvas tray container outside the right of the viewport. */
   #offcanvas {
     position: fixed;
     display: inline-block;
@@ -154,8 +150,8 @@
     width: 70%;
   }
 }
-@media (min-width: 1000px) { 
-  /* Position the offcanvas tray container ouside the right of the viewport. */
+@media (min-width: 1000px) {
+  /* Position the offcanvas tray container outside the right of the viewport. */
   #offcanvas {
     position: fixed;
     display: inline-block;
diff --git a/core/modules/outside_in/css/outside_in.motion.css b/core/modules/outside_in/css/outside_in.motion.css
index f08a86b..3aedbcd 100644
--- a/core/modules/outside_in/css/outside_in.motion.css
+++ b/core/modules/outside_in/css/outside_in.motion.css
@@ -47,7 +47,7 @@
     -webkit-transition: all .7s ease;
     -moz-transition: all .7s ease;
     transition: all .7s ease;
-  } 
+  }
   #main-canvas-wrapper.js-tray-open #offcanvas {
     -webkit-transition: all .7s ease;
     -moz-transition: all .7s ease;
@@ -55,7 +55,7 @@
   }
 }
 
-/* Transition the administration tray. 
+/* Transition the administration tray.
 #toolbar-administration,
 #toolbar-administration * {
   -webkit-transition: all .7s ease;
diff --git a/core/modules/outside_in/css/outside_in.theme.css b/core/modules/outside_in/css/outside_in.theme.css
index d7d7827..c263ba0 100644
--- a/core/modules/outside_in/css/outside_in.theme.css
+++ b/core/modules/outside_in/css/outside_in.theme.css
@@ -35,7 +35,7 @@ button.toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:be
   background-image: url(../../images/core/icons/ffffff/pencil.svg);
 }
 
-/* Style the oolbar when in edit mode. */
+/* Style the toolbar when in edit mode. */
 #toolbar-bar.js-outside-in-edit-mode {
   background-color: #fff;
 }
@@ -55,8 +55,8 @@ button.toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:be
  background-image: linear-gradient(to bottom, #0094f0, #0e69be);
 }
 
-/* 
- * Style the ediables while in edit mode.  
+/*
+ * Style the editables while in edit mode.
  */
 
 /* Highlight editable regions in edit mode. */
@@ -64,7 +64,7 @@ button.toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:be
   outline: 1px dashed rgba(0,0,0,0.5);
   box-shadow: 0 0 0 1px rgba(255,255,255,0.7);
 }
-#main-canvas.js-outside-in-edit-mode .outside-in-editable:hover { 
+#main-canvas.js-outside-in-edit-mode .outside-in-editable:hover {
   outline: 1px dashed rgba(0,0,0,0.5);
   box-shadow: 0 0 0 1px rgba(255,255,255,0.7);
   background-color: rgba(0,0,0,0.2);
@@ -82,8 +82,8 @@ button.toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:be
   opacity: 1;
 }
 
-/* 
- * Style the offcanvas container. 
+/*
+ * Style the offcanvas container.
  */
 div#offcanvas {
   background: #fff;
diff --git a/core/modules/outside_in/outside_in.module b/core/modules/outside_in/outside_in.module
index 8db4323..719c253 100644
--- a/core/modules/outside_in/outside_in.module
+++ b/core/modules/outside_in/outside_in.module
@@ -7,6 +7,7 @@
 
 use Drupal\Core\Routing\RouteMatchInterface;
 use Drupal\outside_in\Block\BlockEntityOffCanvasForm;
+use Drupal\outside_in\Form\SystemBrandingOffCanvasForm;
 
 /**
  * Implements hook_help().
@@ -113,25 +114,18 @@ function outside_in_toolbar_alter(&$items) {
     // @todo Create a dynamic method for modules to set their own items.
     $edit_mode_items = ['contextual', 'block_place'];
     foreach ($items as $key => $item) {
-      if (!in_array($key, $edit_mode_items) &&
-      (!is_array($items[$key]['#wrapper_attributes']['class'])
-          || !in_array('hidden',$items[$key]['#wrapper_attributes']['class']))) {
+      if (!in_array($key, $edit_mode_items) && (!is_array($items[$key]['#wrapper_attributes']['class']) || !in_array('hidden', $items[$key]['#wrapper_attributes']['class']))) {
         $items[$key]['#wrapper_attributes']['class'][] = 'edit-mode-inactive';
       }
     }
   }
 }
 
-
 /**
  * Implements hook_block_alter().
- *
- * Removes the "popular" block from display if the module is not configured
- * to count content views.
  */
 function outside_in_block_alter(&$definitions) {
-
   if (!empty($definitions['system_branding_block'])) {
-    $definitions['system_branding_block']['form']['offcanvas'] = 'Drupal\outside_in\Form\SystemBrandingOffCanvasForm';
+    $definitions['system_branding_block']['form']['offcanvas'] = SystemBrandingOffCanvasForm::class;
   }
 }
diff --git a/core/modules/outside_in/src/Form/SystemBrandingOffCanvasForm.php b/core/modules/outside_in/src/Form/SystemBrandingOffCanvasForm.php
index 1b88c8a..48278a8 100644
--- a/core/modules/outside_in/src/Form/SystemBrandingOffCanvasForm.php
+++ b/core/modules/outside_in/src/Form/SystemBrandingOffCanvasForm.php
@@ -3,31 +3,27 @@
 namespace Drupal\outside_in\Form;
 
 
-use Drupal\Component\Plugin\PluginInspectionInterface;
+use Drupal\Component\Plugin\PluginAwareInterface;
 use Drupal\Core\Config\ConfigFactoryInterface;
 use Drupal\Core\DependencyInjection\ContainerInjectionInterface;
-use Drupal\Core\Form\ConfigFormBaseTrait;
 use Drupal\Core\Form\FormStateInterface;
-use Drupal\Core\Plugin\PluginAwareInterface;
 use Drupal\Core\Plugin\PluginFormInterface;
 use Symfony\Component\DependencyInjection\ContainerInterface;
 
 /**
  * The OffCanvas form handler for the SystemBrandingBlock.
  *
- * @see outside_in_block_alter().
+ * @see outside_in_block_alter()
  */
 class SystemBrandingOffCanvasForm implements ContainerInjectionInterface, PluginAwareInterface, PluginFormInterface {
 
-  use ConfigFormBaseTrait;
-
   /**
    * The plugin.
    *
-   * @var \Drupal\Component\Plugin\PluginInspectionInterface|\Drupal\Core\Plugin\PluginFormInterface
-   *
+   * @var \Drupal\Core\Plugin\PluginFormInterface
    */
   protected $plugin;
+
   /**
    * The config factory.
    *
@@ -54,11 +50,10 @@ public static function create(ContainerInterface $container) {
     );
   }
 
-
   /**
    * {@inheritdoc}
    */
-  public function setPlugin(PluginInspectionInterface $plugin) {
+  public function setPlugin($plugin) {
     $this->plugin = $plugin;
   }
 
@@ -67,7 +62,7 @@ public function setPlugin(PluginInspectionInterface $plugin) {
    */
   public function buildConfigurationForm(array $form, FormStateInterface $form_state) {
     $form = $this->plugin->buildConfigurationForm($form, $form_state);
-    $site_config = $this->config('system.site');
+    $site_config = $this->configFactory->getEditable('system.site');
     $form['site_information'] = array(
       '#type' => 'details',
       '#title' => t('Site details'),
@@ -86,9 +81,11 @@ public function buildConfigurationForm(array $form, FormStateInterface $form_sta
       '#default_value' => $site_config->get('slogan'),
       '#description' => t("How this is used depends on your site's theme."),
     );
+
     // Unset links to Site Information form, we can make these changes here.
     unset($form['block_branding']['use_site_name']['#description']);
     unset($form['block_branding']['use_site_slogan']['#description']);
+
     return $form;
   }
 
@@ -104,18 +101,11 @@ public function validateConfigurationForm(array &$form, FormStateInterface $form
    */
   public function submitConfigurationForm(array &$form, FormStateInterface $form_state) {
     $site_info = $form_state->getValue('site_information');
-    $this->config('system.site')
+    $this->configFactory->getEditable('system.site')
       ->set('name', $site_info['site_name'])
       ->set('slogan', $site_info['site_slogan'])
       ->save();
     $this->plugin->submitConfigurationForm($form, $form_state);
   }
 
-  /**
-   * {@inheritdoc}
-   */
-  protected function getEditableConfigNames() {
-    return ['system.site'];
-  }
-
 }