Move control of overall padding of side pane content

The fact that we needed to apply padding to both `app-breadcrumbs`
and `app-content` was a sign that the padding was not applied
to the right elements and should instead be applied to their parent.

This means that whatever gets added inside `app-side-pane__content`,
the right amount of space will surround it.

Author: romaricpascal

src/stylesheets/components/_split-pane.scss

@@ -30,9 +30,16 @@ $toc-width-tablet: 210px;
 }
 
 .app-split-pane__content {
+  padding-top: govuk-spacing(3);
+  padding-bottom: govuk-spacing(4);
+
   @include govuk-media-query($from: tablet) {
     display: flex;
     min-width: 0;
+
+    padding-top: govuk-spacing(6);
+    padding-bottom: govuk-spacing(8);
+    padding-left: govuk-spacing(6);
     flex: 1 1 100%;
     flex-direction: column;
   }

src/stylesheets/main.scss

@@ -75,17 +75,6 @@ $app-code-color: #d13118;
   @include govuk-width-container(1100px);
 }
 
-.app-breadcrumbs,
-.app-content {
-  padding-top: govuk-spacing(3);
-  padding-left: govuk-spacing(3);
-
-  @include govuk-media-query($from: tablet) {
-    padding-top: govuk-spacing(6);
-    padding-left: govuk-spacing(6);
-  }
-}
-
 .app-breadcrumbs {
   // match top padding of the first item in the pane navigation so that the
   // breadcrumbs line up nicely
@@ -94,12 +83,6 @@ $app-code-color: #d13118;
 }
 
 .app-content {
-  padding-bottom: govuk-spacing(4);
-
-  @include govuk-media-query($from: tablet) {
-    padding-bottom: govuk-spacing(8);
-  }
-
   h1 {
     max-width: 15em;
   }