Fixed form item width by putting them in columns.

frontend/src/views/Home.vue

@@ -1,17 +1,22 @@
 <template>
-  <b-container class="home">
+  <b-container class="home" align-h="center">
     <h1>Training Observations</h1>
-    <b-row>
+    <b-row align-h="center">
+      <b-col>
       <b-form-group label="Site">
         <b-form-select :value="site" @input="setSite" :options="siteOptions"></b-form-select>
       </b-form-group>
+      </b-col>
     </b-row>
-    <b-row>
+    <b-row align-h="center">
+      <b-col>
       <b-form-group label="Description">
         <b-form-input :value="description" @input="setDescription" type="text"></b-form-input>
       </b-form-group>
+      </b-col>
     </b-row>
-    <b-row>
+    <b-row align-h="center">
+      <b-col>
       <b-form-group label="Type">
         <b-form-select :value="type" @input="setType">
           <option :value=null>Select a training type</option>
@@ -19,16 +24,21 @@
           <option value="CONTINUING">CONTINUING</option>
         </b-form-select>
       </b-form-group>
+      </b-col>
     </b-row>
-    <b-row>
+    <b-row align-h="center">
+      <b-col>
       <b-form-group label="Tutor(s)">
         <p v-if="site == null">Select a site first.</p>
         <v-icon name="spinner" spin v-if="loadingTutors"/>
         <b-form-checkbox-group :value="tutors" @input="setTutors" :options="tutorOptions"></b-form-checkbox-group>
       </b-form-group>
+      </b-col>
     </b-row>
-    <b-row>
+    <b-row align-h="center">
+      <b-col>
       <b-button>Start</b-button>
+      </b-col>
     </b-row>
   </b-container>
 </template>