fix padding on various pages (#11493)

* fix padding on various pages

* some additional padding

* update to use bootstrap built in spacing classes

website/client/src/components/groups/group.vue

@@ -160,7 +160,7 @@
           </div>
         </div>
       </div>
-      <div>
+      <div class="px-3 py-3">
         <quest-sidebar-section
           v-if="isParty"
           :group="group"
@@ -255,11 +255,10 @@
   .sidebar {
     background-color: $gray-600;
     padding-bottom: 2em;
-
   }
 
   .buttons-wrapper {
-    padding-top: 2.8em;
+    padding: 2.8em 24px 0em 24px;
   }
 
   .card {

website/client/src/components/groups/tavern.vue

@@ -229,7 +229,7 @@
           -info-button(@click="showWorldBossInfo()") {{$t('whatIsWorldBoss') }}
           -->
         </div>
-        <div class="sleep below-header-sections">
+        <div class="sleep px-4 py-3">
           <strong v-once>{{ $t('sleepDescription') }}</strong>
           <ul>
             <li v-once>
@@ -263,7 +263,7 @@
           </button>
         </div>
       </div>
-      <div class="px-3">
+      <div class="px-4">
         <sidebar-section :title="$t('staffAndModerators')">
           <div class="row">
             <div
@@ -511,10 +511,6 @@
   .sidebar {
     background-color: $gray-600;
     padding: 0em;
-
-    .below-header-sections {
-      padding: 1em 1.75em 1em 1.75em;
-    }
   }
 
   .pause-button {

website/client/src/components/tasks/user.vue

@@ -246,6 +246,8 @@
   @import '~@/assets/scss/create-task.scss';
 
   .user-tasks-page {
+    padding-left: 12px;
+    padding-right: 12px;
     padding-top: 16px;
   }