Standardize header CSS

Flexbox was disrupting margin collapse, so using a wrapper flex on all pages with no bottom-margin

src/pages/BingoCard.vue

@@ -103,12 +103,6 @@
 </template>
 
 <style scoped>
-	.nav-bar {
-		display: flex;
-		justify-content: space-between;
-		align-items: start;
-	}
-
 	.skip-btn {
 		display: flex;
   		margin: 0 auto 1em auto;

src/pages/CategoryList.vue

@@ -60,7 +60,10 @@
 </script>
 
 <template>
-	<h1>Backlog Bingo</h1>
+	<div class="nav-bar">
+		<h1>Backlog Bingo</h1>
+	</div>
+
 	<p>
 		Welcome to Backlog Bingo!  This web app lets you generate a bingo card, either from a prebuilt category list or from your own provided JSON.
 		<em>

src/pages/GameRules.vue

@@ -81,17 +81,6 @@
 </template>
 
 <style scoped>
-	.nav-bar {
-		display: flex;
-		align-items: start;
-		justify-content: end;
-		gap: 10px;
-
-		h1 {
-			margin-right: auto;
-		}
-	}
-
 	.gamerules-header {
 		margin-top: 1.4em;
 	}

src/pages/RefineCategories.vue

@@ -295,17 +295,6 @@
 </template>
 
 <style scoped>
-	.nav-bar {
-		display: flex;
-		align-items: start;
-		gap: 10px;
-		justify-content: end;
-
-		h1 {
-			margin-right: auto;
-		}
-	}
-
 	.btn-bar {
 		display: flex;
 		justify-content: end;

src/style.css

@@ -136,3 +136,16 @@ input[type="button"] {
 input[type="checkbox"] {
 	margin-right: 7px;
 }
+
+/* Common classes */
+.nav-bar {
+	display: flex;
+	align-items: start;
+	justify-content: end;
+	gap: 10px;
+
+	h1 {
+		margin-right: auto;
+		margin-bottom: 0;
+	}
+}