use floats and padding only on print media, use flex otherwise

styles.css

@@ -44,16 +44,6 @@ small {
   font-family: 'Lora', serif;
 }
 
-.wrapper {
-  padding: 20px 0px;
-  /*display: grid;
-  grid-template-columns: .5fr 1.5fr 4fr .5fr;
-  */
-}
-.wrapper > div { padding: 0px 10px; float:left }
-.wrapper > div:nth-child(1) { height: 1px; width: 6%; }
-.wrapper > div:nth-child(2) { width: 23.2%; }
-.wrapper > div:nth-child(3) { width: 61.5%; margin-left: -20px;}
 
 
 .sidebar-section p {
@@ -143,6 +133,11 @@ h6.skill-class {
   margin-bottom: 5px;
 }
 
+.wrapper {
+  display: grid;
+  grid-template-columns: .5fr 1.5fr 4fr .5fr;
+}
+
 @media print {
   .new-page {
     page-break-before: always;
@@ -154,4 +149,11 @@ h6.skill-class {
     page-break-after: avoid;
     page-break-inside: avoid;
   }
+  .wrapper {
+    padding: 20px 0px;
+  }
+  .wrapper > div { padding: 0px 10px; float:left }
+  .wrapper > div:nth-child(1) { height: 1px; width: 6%; }
+  .wrapper > div:nth-child(2) { width: 23.2%; }
+  .wrapper > div:nth-child(3) { width: 61.5%; margin-left: -20px;}
 }