Tweak styles a bit to remove the floats.

Currently the float applied to the load and save buttons ends up causing
the tab order to be incorrect.  Although the load button is displayed
first, the tab order goes to the save button first, then the load
button.

Author: drgrice1

public/css/navbar.css

@@ -12,12 +12,13 @@ body * {
   left: 0;
   width: 100%;
   height: 50px;
-  /* overflow: hidden; */
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   background-color: #012C4E;
 }
 
 .topnav a {
-  float: left;
   display: block;
   color: white;
   text-align: center;
@@ -37,8 +38,7 @@ body * {
 }
 
 .dropdown {
-  float: left;
-  /* overflow: hidden; */
+	height: 100%;
 }
 
 .dropdown .dropbtn {
@@ -62,7 +62,6 @@ body * {
 }
 
 .dropdown-content a {
-  float: none;
   color: white;
   background-color: #012C4E;
   padding: 12px 16px;
@@ -80,23 +79,25 @@ body * {
   display: block;
 }
 
+.search-container {
+	height: 100%;
+}
+
 .topnav .search-container {
-  float: right;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  column-gap: 10px;
+  padding: 10px;
 }
 
 .topnav input[type=text] {
   padding: 6px;
-  margin-top: 7px;
-  margin-right: 16px;
-  font-size: 17px;
   border: none;
 }
 
 .topnav .search-container button {
-  float: right;
   padding: 6px 10px;
-  margin-top: 7px;
-  margin-right: 16px;
   background: #C0CAD3;
   font-size: 17px;
   border: none;
@@ -108,11 +109,7 @@ body * {
 }
 
 @media screen and (max-width: 600px) {
-  .topnav .search-container {
-    float: none;
-  }
   .topnav a, .topnav input[type=text], .topnav .search-container button {
-    float: none;
     display: block;
     text-align: left;
     width: 100%;

templates/layouts/navbar.html.ep

@@ -23,8 +23,8 @@
           <span id="hiddenSourceFilePath"></span>
           <input type="text" placeholder="file path..." name="sourceFilePath" id="sourceFilePath">
           <input type="text" placeholder="random seed..." name="problemSeed" id="problemSeed" style="width:130px;">
-          <button type="button" id="save-problem">Save</button>
           <button type="button" id="load-problem">Load</button>
+          <button type="button" id="save-problem">Save</button>
         <!--/form-->
       </div>
     </div>