Adjust spacing in the character creation screen

game.js

@@ -5594,6 +5594,8 @@ function render_checkbox_option(li, option) {
   label.setAttribute("for", option.id);
   label.innerText = option.name;
 
+  label.classList.add("solo");
+
   attach_form_data(input, option);
 
   if (option.tooltip != undefined) {
@@ -5652,6 +5654,8 @@ function render_subcategory_option(li, option) {
   sub_label.setAttribute("for", option.id);
   sub_label.innerText = option.name;
 
+  sub_label.classList.add("solo");
+
   let sub_div_inner = document.createElement("div");
 
   sub_div_inner.classList.add("reveal-if-active");

style.css

@@ -439,6 +439,7 @@ body.dark input[type="checkbox"]:checked+
   align-items: center;
   text-align: center;
   width: 500px;
+  margin: 10px auto;
 }
 
 .flex-outer input[type="radio"],
@@ -479,8 +480,15 @@ body.light .flex-outer input[type="checkbox"]:checked + label:not(.custom-header
 
 .flex-outer label {
   flex: 0 1 40%;
+  text-align: right;
+  margin-right: 12pt;
+}
+
+.flex-outer label.solo {
+  text-align: center;
 }
 
+
 .flex-outer label + * {
   flex: 1 1 20%;
 }
@@ -496,9 +504,9 @@ body.light .flex-outer input[type="checkbox"]:checked + label:not(.custom-header
 
 .flex-outer-sub li {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   align-items: center;
-  margin: auto;
+  margin: 5px auto;
   width: 90%;
 }