Created a button-wrapper div to center buttons

src/App.vue

@@ -61,10 +61,8 @@
     
     box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.25);
     border-radius: 15px;
-    padding: 0.4em 1.4em;
-    margin-left: 5%;
-    margin-right: 5%;
     border: none;
+    padding: 0.4em 1.4em;
 
     font-family: Open Sans,sans-serif;
     font-style: normal;
@@ -76,6 +74,12 @@
     background-color: #E94A47;
   }
 
+  /* div element used to center a button or multiple buttons */
+  .button-wrapper {
+    text-align: center;
+    margin: auto;
+  }
+
   body {
     background-color: #FCF7F8;
     color: #0B2545;

src/components/Question.vue

@@ -4,9 +4,7 @@
     }
 
     button {
-      display: block; 
       width: 80%;
-      margin: 0 auto;
       margin-bottom: 5%;
     }    
     
@@ -24,11 +22,17 @@
             <input v-model="selection" type="range" min="0" max="150" value="18" class="slider">
         </div>
         <div v-if="type === 'choice'" class="question-options">
+            <div class="button-wrapper">
               <button v-bind:key="answer.text"
                       v-for="answer in answers"
                       v-on:click="answerQuestion(answer.value)">{{ answer.text }}</button>
             </div>
-        <router-link to="/questionnaire/help" style="text-decoration: none"><button class="alert">Ich brauche Hilfe zu dieser Frage</button></router-link>
+        </div>
+        <div class="button-wrapper">
+          <router-link to="/questionnaire/help" style="text-decoration: none">
+            <button class="alert">Ich brauche Hilfe zu dieser Frage</button>
+          </router-link>
+        </div>
         <svg v-if="$store.state.currentQuestion != 0" v-on:click="goBack()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"><path fill="none" d="M0 0h24v24H0z"/><path d="M8 11.333l10.223-6.815a.5.5 0 0 1 .777.416v14.132a.5.5 0 0 1-.777.416L8 12.667V19a1 1 0 0 1-2 0V5a1 1 0 1 1 2 0v6.333z"/></svg>
     </div>
 </template>

src/views/HelpPage.vue

@@ -1,9 +1,25 @@
+<style scoped>
+  .help {
+    padding: 1em;
+  }
+
+  button {
+      width: 80%;
+      margin-bottom: 5%;
+  }
+</style>
+
 <template>
   <div class="help">
     <p>{{ $store.state.questions[$store.state.currentQuestion].description }}</p>
-        <router-link to="/questionnaire"><button>Zurück zur Frage</button></router-link>
-        <br><br>
-        <router-link to="/questionnaire"><button v-on:click="$store.commit('nextQuestion')" class="alert">Ich möchte diese Frage überspringen</button></router-link>
+    <div class="button-wrapper">
+      <router-link to="/questionnaire">
+        <button>Zurück zur Frage</button>
+      </router-link>
+      <router-link to="/questionnaire">
+        <button v-on:click="$store.commit('nextQuestion')" class="alert">Ich möchte diese Frage überspringen</button>
+      </router-link>
+    </div>
   </div>
 </template>
 
@@ -15,9 +31,3 @@
     }
   }
 </script>
-
-<style scoped>
-.help {
-    padding: 1em;
-}
-</style>

src/views/Home.vue

@@ -38,7 +38,11 @@
     <div>
       <p id="title"><b>COVID</b>assist</p>
       <p>Die COVID-19 Verhaltensdiagnose, die keine Daten speichert.</p>
-      <router-link style="text-decoration:none" to="/warning"><button>Infektionsrisiko ermitteln</button></router-link> 
+      <div class="button-wrapper">
+        <router-link style="text-decoration:none" to="/warning">
+          <button>Infektionsrisiko ermitteln</button>
+        </router-link> 
+      </div>
     </div>
 
     <a id="information" href="https://www.rki.de/SharedDocs/FAQ/NCOV2019/FAQ_Liste.html"><b>Informationen zu COVID-19</b></a>

src/views/Warning.vue

@@ -24,6 +24,10 @@
         Bereitschaftsdienst unter 116117 an.
       </p>
     </div>
-    <router-link v-on:click="this.$store.commit('startWithFirstQuestion')" style="text-decoration:none" to="/questionnaire"><button>Ich möchte weiter zum Test</button></router-link>
+    <div class="button-wrapper">
+      <router-link v-on:click="this.$store.commit('startWithFirstQuestion')" style="text-decoration:none" to="/questionnaire">
+        <button>Ich möchte weiter zum Test</button>
+      </router-link>
+    </div>
   </div>
 </template>