fixed mobile button layout

index.html

@@ -14,6 +14,7 @@
         <p>Select and float your favorite shades</p>
       </header>
 <div id="selected-palette">
+  <div class="palette-header-row">
     <h2>Your Palette</h2>
     <div id="palette-controls">
       <label class="switch">
@@ -23,7 +24,7 @@
       <button id="shuffle-palette" title="Shuffle Palette">🔀</button>
       <button id="share-palette" title="Share Palette">🔗</button>
     </div>
-    <div id="palette-colors"></div>
+  </div> <div id="palette-colors"></div>
   <button id="clear-palette">Clear Palette</button>
 </div>
 

style.css

@@ -156,7 +156,20 @@ footer {
 
 }
 
+.palette-header-row {
+  display: flex;
+  justify-content: space-between; /* Pushes title and buttons apart */
+  align-items: center;          /* Vertically centers them */
+  width: 100%;                  /* Makes the row fill the container */
+  padding: 0 10px;              /* Adds some horizontal spacing */
+  margin: auto
+}
 
+/* Remove the default margins from your title */
+#selected-palette h2 {
+  margin: 0;
+  font-size: 1.2rem;
+}
 
 
 .metallic-element[data-color="#FFD700"] {
@@ -414,7 +427,7 @@ footer {
 }
 
 #palette-controls {
-  position: absolute;
+  position: static;
   top: 10px;
   right: 10px;
   display: flex;