Fix some styling issues for forms

web/src/main/resources/static/style.css

@@ -1,4 +1,5 @@
 * {
+    box-sizing: border-box;
     transition: 0.25s ease;
 }
 
@@ -129,6 +130,7 @@ header.row {
     font-weight: bold;
     padding: var(--input-padding);
     text-decoration: none;
+    text-align: center;
 }
 
 .flex-full-width {
@@ -261,11 +263,22 @@ a {
 }
 
 @media all and (max-width: 400px) {
-    button {
+    .button {
         width: 100%;
     }
 
+    .center {
+        padding: 10px;
+    }
+
     .flex-full-width {
         flex-direction: column;
+        padding: 5px;
+        width: 100%;
+    }
+
+    .flex-full-width .button {
+        flex-direction: column;
+        margin: 5px;
     }
 }

web/src/main/resources/templates/budget-form.mustache

@@ -1,5 +1,6 @@
 {{> partials/head }}
 <div id="app">
+    <main>
         <h1>{{title}}</h1>
         <div class="center">
             {{#error }}
@@ -13,5 +14,6 @@
                 <input id="submit" type="submit" class="button button-primary" value="Save"/>
             </form>
         </div>
+    </main>
 </div>
 {{>partials/foot}}

web/src/main/resources/templates/login.mustache

@@ -1,5 +1,6 @@
 {{> partials/head }}
 <div id="app">
+    <main>
         <h1>{{title}}</h1>
         <div class="center">
             <div class="logo"></div>
@@ -16,5 +17,6 @@
             <a href="/resetpassword" style="padding: var(--input-padding)">Forgot your password?</a>
             <a href="/register" style="padding: var(--input-padding)">Create an account</a>
         </div>
+    </main>
 </div>
 {{>partials/foot}}

web/src/main/resources/templates/register.mustache

@@ -1,5 +1,6 @@
 {{> partials/head }}
 <div id="app">
+    <main>
         <h1>{{title}}</h1>
         <div class="center">
             <div class="logo"></div>
@@ -15,9 +16,10 @@
                 <input id="password" type="password" name="password"/>
                 <label for="confirm-password">Confirm Password</label>
                 <input id="confirm-password" type="password" name="confirmPassword"/>
-            <input type="submit" class="button button-primary" value="Login"/>
+                <input type="submit" class="button button-primary" value="Register"/>
             </form>
             <a href="/login" style="padding: var(--input-padding)">Login</a>
         </div>
+    </main>
 </div>
 {{>partials/foot}}