diff --git a/src/frontend/scripts/characters/edit.ts b/src/frontend/scripts/characters/edit.ts
index 9be8a23..8724694 100644
--- a/src/frontend/scripts/characters/edit.ts
+++ b/src/frontend/scripts/characters/edit.ts
@@ -87,7 +87,7 @@ import * as api from "../api";
             console.log("got a response back", resp);
         }
 
-        const inputs = document.querySelectorAll("#basicInfo input");
+        const inputs = document.querySelectorAll("#basics input");
 
         inputs.forEach(input => {
             console.log('got an input', input);
diff --git a/src/frontend/templates/characters/edit_character.html.tera b/src/frontend/templates/characters/edit_character.html.tera
index f447f46..41c0162 100644
--- a/src/frontend/templates/characters/edit_character.html.tera
+++ b/src/frontend/templates/characters/edit_character.html.tera
@@ -52,8 +52,6 @@
      }
 
      .attribute {
-         margin: 0;
-         padding: 0;
          display: flex;
      }
 
@@ -76,26 +74,25 @@
      }
 
      #skills {
-         padding: 4px;
-         border-collapse: collapse;
+
+     }
+
+     #skills .flex-container {
+         display: flex;
+         flex-flow: row wrap;
      }
 
      #skills .skills-section {
          border: 1px solid gray;
-         border-collapse: collapse;
-         display: table-cell;
+         margin-top: -1px;
+         margin-left: -1px;
      }
 
      .skill {
-         margin: 0;
-         padding: 0;
          display: flex;
      }
 
      .skill label {
-         display: inline-block;
-         float: left;
-         clear: left;
          width: 10em;
          text-align: right;
          vertical-align: text-bottom;
@@ -105,8 +102,6 @@
 
      .skill input {
          max-width: 4em;
-         display: inline-block;
-         float: left;
          padding: 8px;
          border: none;
          background-color: lightgray;
@@ -233,22 +228,25 @@
 
         <div id="skills">
             <h2>Skills</h2>
-            <div class="skills-section" id="mentalSkills">
-                {% for skill_name, skill in sheet.mentalSkills %}
-                    {{ macros::skill(name=skill_name, value=skill.dots) }}
-                {% endfor %}
-            </div>
 
-            <div class="skills-section" id="physicalSkills">
-                {% for skill_name, skill in sheet.physicalSkills %}
-                    {{ macros::skill(name=skill_name, value=skill.dots) }}
-                {% endfor %}
-            </div>
+            <div class="flex-container">
+                <div class="skills-section" id="mentalSkills">
+                    {% for skill_name, skill in sheet.mentalSkills %}
+                        {{ macros::skill(name=skill_name, value=skill.dots) }}
+                    {% endfor %}
+                </div>
 
-            <div class="skills-section" id="socialSkills">
-                {% for skill_name, skill in sheet.socialSkills %}
-                    {{ macros::skill(name=skill_name, value=skill.dots) }}
-                {% endfor %}
+                <div class="skills-section" id="physicalSkills">
+                    {% for skill_name, skill in sheet.physicalSkills %}
+                        {{ macros::skill(name=skill_name, value=skill.dots) }}
+                    {% endfor %}
+                </div>
+
+                <div class="skills-section" id="socialSkills">
+                    {% for skill_name, skill in sheet.socialSkills %}
+                        {{ macros::skill(name=skill_name, value=skill.dots) }}
+                    {% endfor %}
+                </div>
             </div>
         </div>