Refactor to flexbox

app.css

@@ -15,37 +15,23 @@ h2 {
   font-family: Gill Sans;
   font-size: 1.5rem;
   font-weight: 400;
-  float: left;
   letter-spacing: 3px;
-  line-height: 2.4rem;
+  line-height: 2.2rem;
-  margin: 0;
+  margin: 6px 0 0 10px;
 }
 
 main {
   background: #e5e5e5;
   border-radius: 3.5%;
   box-shadow: 0 0 20px #999;
-  margin: 0 auto;
+  margin: 2% auto 0;
-  margin-top: 2%;
   padding: 2%;
   width: 905px;
 }
 
-#canvas {
-  clear: both;
-  margin: 0 auto;
-}
-
-#palette {
-  clear: both;
-  height: 100px;
-  width: 100%;
-}
-
 .pixel {
   background: white;
   border: 1px solid #e5e5e5;
-  float: left;
   height: 14px;
   width: 14px;
 }
@@ -54,23 +40,19 @@ main {
   border: 1px solid #bbbbbb;
   border-radius: 50%;
   height: 35.5px;
-  float: left;
   margin: 5px 5px 0 0;
   width: 35.5px;
 }
 
-.selection {
-  float: left;
-  height: 35.5px;
-  margin-top: 6px;
-  padding-left: 18px;
-}
-
 .current {
   border: 1px solid #999999;
   border-radius: 5%;
-  float: left;
   height: 35.5px;
-  margin-left: 12px;
+  margin: 6px 0 0 12px;
   width: 100px;
 }
+
+#canvas, #palette {
+  display: flex;
+  flex-wrap: wrap;
+}

app.js

@@ -69,18 +69,14 @@ var drawPalette = function() {
     palette.appendChild(color);
   }
 
-  var selection = document.createElement('div');
-  selection.className = 'selection';
-
   var heading = document.createElement('h2');
   heading.textContent = 'CURRENT COLOR >';
 
   var current = document.createElement('div');
   current.className = 'current';
 
-  selection.appendChild(heading);
+  palette.appendChild(heading);
-  selection.appendChild(current);
+  palette.appendChild(current);
-  palette.appendChild(selection);
 
   palette.addEventListener('click', function(event) {
     if (event.target.className !== 'color') {