Add full width background to SDG headers

We couldn't do it before because we didn't have a way to add full width
backgrounds to elements which were inside a ".row"-like element.

app/assets/stylesheets/sdg/goals/show.scss

@@ -1,13 +1,12 @@
 .sdg-goal-show {
 
-  > :not(.feeds-participation) {
+  > :not(.feeds-participation):not(.sdg-goal) {
     @include grid-column-gutter;
   }
 
   .sdg-goal {
 
     > header {
-      @include grid-column-gutter;
       align-items: center;
       color: #fff;
       display: flex;
@@ -30,6 +29,7 @@
     }
 
     h1 {
+      @include grid-column-gutter;
       align-items: center;
       display: flex;
       font-family: "Oswald" !important;
@@ -55,6 +55,7 @@
 
     @each $code, $color in $sdg-colors {
       &.sdg-goal-#{$code} > header {
+        @include full-width-background;
         background-color: $color;
 
         &::after {
@@ -64,6 +65,7 @@
     }
 
     .goal-description-content {
+      @include grid-column-gutter;
 
       .read-more {
         text-align: center;