diff --git a/src/frontend/templates/characters/edit_character.html.tera b/src/frontend/templates/characters/edit_character.html.tera
index 58125e6..f447f46 100644
--- a/src/frontend/templates/characters/edit_character.html.tera
+++ b/src/frontend/templates/characters/edit_character.html.tera
@@ -7,7 +7,7 @@
          font-family: Liberation Sans, Arial;
      }
 
-     #basicsBox {
+     #basics .flex-container {
          display: flex;
          flex-flow: row wrap;
      }
@@ -40,15 +40,15 @@
          margin: 0;
      }
 
-     #attributes {
-         padding: 4px;
-         border-collapse: collapse;
+     #attributes .flex-container {
+         display: flex;
+         flex-flow: row wrap;
      }
 
      #attributes .attributes-section {
          border: 1px solid gray;
-         border-collapse: collapse;
-         display: table-cell;
+         margin-left: -1px;
+         margin-top: -1px;
      }
 
      .attribute {
@@ -58,10 +58,8 @@
      }
 
      .attribute label {
-         display: inline-block;
-         float: left;
-         clear: left;
          width: 10em;
+         display: inline;
          text-align: right;
          vertical-align: text-bottom;
          padding: 8px;
@@ -70,8 +68,7 @@
 
      .attribute input {
          max-width: 4em;
-         display: inline-block;
-         float: left;
+         display: inline;
          padding: 8px;
          border: none;
          background-color: lightgray;
@@ -175,7 +172,7 @@
 
     <h1>Core Sheet</h1>
     <div>
-        <div id="basicInfo">
+        <div id="basics">
             <h1>
                 <label for="characterName">Name</label>
                 <input type="text" id="characterName" name="characterName" value="{{name}}" />
@@ -184,7 +181,7 @@
             <h2>Basics</h2>
             <div>System: {{data_type}}</div>
 
-            <div id="basicsBox">
+            <div class="flex-container">
                 <div class="basics-row">
                     <div class="basics-entry">
                         <label for="gender">Gender:</label>
@@ -213,22 +210,24 @@
 
         <div id="attributes">
             <h2>Attributes</h2>
-            <div class="attributes-section" id="mentalAttributes">
-                {{ macros::attribute(name="Intelligence", value=sheet.intelligence) }}
-                {{ macros::attribute(name="Wits", value=sheet.wits) }}
-                {{ macros::attribute(name="Resolve", value=sheet.resolve) }}
-            </div>
+            <div class="flex-container">
+                <div class="attributes-section" id="mentalAttributes">
+                    {{ macros::attribute(name="Intelligence", value=sheet.intelligence) }}
+                    {{ macros::attribute(name="Wits", value=sheet.wits) }}
+                    {{ macros::attribute(name="Resolve", value=sheet.resolve) }}
+                </div>
 
-            <div class="attributes-section" id="physicalAttributes">
-                {{ macros::attribute(name="Strength", value=sheet.strength) }}
-                {{ macros::attribute(name="Dexterity", value=sheet.dexterity) }}
-                {{ macros::attribute(name="Stamina", value=sheet.stamina) }}
-            </div>
+                <div class="attributes-section" id="physicalAttributes">
+                    {{ macros::attribute(name="Strength", value=sheet.strength) }}
+                    {{ macros::attribute(name="Dexterity", value=sheet.dexterity) }}
+                    {{ macros::attribute(name="Stamina", value=sheet.stamina) }}
+                </div>
 
-            <div class="attributes-section" id="socicalAttributes">
-                {{ macros::attribute(name="Presence", value=sheet.presence) }}
-                {{ macros::attribute(name="Manipulation", value=sheet.manipulation) }}
-                {{ macros::attribute(name="Composure", value=sheet.composure) }}
+                <div class="attributes-section" id="socicalAttributes">
+                    {{ macros::attribute(name="Presence", value=sheet.presence) }}
+                    {{ macros::attribute(name="Manipulation", value=sheet.manipulation) }}
+                    {{ macros::attribute(name="Composure", value=sheet.composure) }}
+                </div>
             </div>
         </div>