Remake without using w3 stylesheet (fix menu spacing)

layouts/custom/sc.data.html

 {{ partial "header.html" . }}
 
-<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
-
 <div class="header">
     <h1>{{ .Title }}</h1>
     <h2>{{ .Description }}</h2>
@@ -12,6 +10,7 @@
         margin: 0;
         max-width: none;
     }
+
     .select {
         float: top;
         z-index: 1;
@@ -19,26 +18,48 @@
         overflow-x: hidden;
         padding: 8px 10px;
     }
-    .contents {
+
+    .contentsFull {
         margin: 0;
         max-width: none;
         float: center;
     }
-    .column {
+
+    .row:after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+
+    .columnImg {
+        float: left;
+        text-align: center;
+        width: 50%;
+    }
+
+    .columnNav {
         float: left;
         text-align: center;
         width: 50%;
     }
+
     .img {
         max-width: 75%;
         height: auto;
         margin-left: auto;
         margin-right: auto;
     }
-    .huGenes {display:none;}
-    .muGenes {display:none;}
+
+    .huGenes {
+        display: none;
+    }
+
+    .muGenes {
+        display: none;
+    }
+
     @media (max-width: 1000px) {
-        .column  {
+        .column {
             width: 100%;
         }
     }
@@ -46,21 +67,35 @@
 
 <div class="cloud">
     <div class="select">
-        <div class="contents w3-content w3-display-container">
-            <div class="column">
-                <p class="w3-padding-5 w3-black huGenesName"></p>
-                <img class="huGenes img" src="/gene.cloud/Genes.hu.202005.png" alt="Human genes searched in May 2020">
-                <img class="huGenes img" src="/gene.cloud/Genes.hu.202004.png" alt="Human genes searched in April 2020">
-                <img class="huGenes img" src="/gene.cloud/Genes.hu.202003.png" alt="Human genes searched in March 2020">
+        <div class="contentsFull">
+            <div class="row">
+                <div class="columnImg">
+                    <p class="huGenesName" style="background-color:black;"></p>
+                    <img class="huGenes img" src="/gene.cloud/Genes.hu.202005.png"
+                        alt="Human genes searched in May 2020">
+                    <img class="huGenes img" src="/gene.cloud/Genes.hu.202004.png"
+                        alt="Human genes searched in April 2020">
+                    <img class="huGenes img" src="/gene.cloud/Genes.hu.202003.png"
+                        alt="Human genes searched in March 2020">
+                </div>
+                <div class="columnImg">
+                    <p class="muGenesName" style="background-color:black;"></p>
+                    <img class="muGenes img" src="/gene.cloud/Genes.mu.202005.png"
+                        alt="Mouse genes searched in May 2020">
+                    <img class="muGenes img" src="/gene.cloud/Genes.mu.202004.png"
+                        alt="Mouse genes searched in April 2020">
+                    <img class="muGenes img" src="/gene.cloud/Genes.mu.202003.png"
+                        alt="Mouse genes searched in March 2020">
+                </div>
+            </div>
+            <div class="row">
+                <div class="columnNav">
+                    <div style="font-size:50px" onclick="plusCloud(1)">&#10094;</div>
+                </div>
+                <div class="columnNav">
+                    <div style="font-size:50px" onclick="plusCloud(-1)">&#10095;</div>
+                </div>
             </div>
-            <div class="column">
-                <p class="w3-padding-5 w3-black muGenesName"></p>
-                <img class="muGenes img" src="/gene.cloud/Genes.mu.202005.png" alt="Mouse genes searched in May 2020">
-                <img class="muGenes img" src="/gene.cloud/Genes.mu.202004.png" alt="Mouse genes searched in April 2020">
-                <img class="muGenes img" src="/gene.cloud/Genes.mu.202003.png" alt="Mouse genes searched in March 2020">
-            </div> 
-            <div class="w3-left" style="font-size:30px" onclick="plusCloud(1)">&#10094;</div>
-            <div class="w3-right" style="font-size:30px"onclick="plusCloud(-1)">&#10095;</div>  
         </div>
     </div>
 </div>
@@ -68,7 +103,7 @@
     <hr>
     <br>
     {{ range where .Pages.ByWeight "Params.current" true }}
-        <li><b><a href="{{.Permalink}}">{{.Params.name}}</a></b></li>
+    <li><b><a href="{{.Permalink}}">{{.Params.name}}</a></b></li>
     {{ end }}
     <br>
     <hr>
@@ -77,25 +112,25 @@
 <script>
     var slideIndex = 1;
     showCloud(slideIndex);
-        
+
     function plusCloud(n) {
-      showCloud(slideIndex += n);
+        showCloud(slideIndex += n);
     }
 
     function showCloud(n) {
-      var i;
-      var x = document.getElementsByClassName("huGenes");
-      var y = document.getElementsByClassName("muGenes");
-      if (n > x.length) {slideIndex = 1}
-      if (n < 1) {slideIndex = x.length}
-      for (i = 0; i < x.length; i++) {
-        x[i].style.display = "none";
-        y[i].style.display = "none";
-      }
-      x[slideIndex-1].style.display = "block";
-      y[slideIndex-1].style.display = "block";
-      document.getElementsByClassName("huGenesName")[0].innerHTML = x[slideIndex-1].alt;
-      document.getElementsByClassName("muGenesName")[0].innerHTML = y[slideIndex-1].alt;
+        var i;
+        var x = document.getElementsByClassName("huGenes");
+        var y = document.getElementsByClassName("muGenes");
+        if (n > x.length) { slideIndex = 1 }
+        if (n < 1) { slideIndex = x.length }
+        for (i = 0; i < x.length; i++) {
+            x[i].style.display = "none";
+            y[i].style.display = "none";
+        }
+        x[slideIndex - 1].style.display = "block";
+        y[slideIndex - 1].style.display = "block";
+        document.getElementsByClassName("huGenesName")[0].innerHTML = x[slideIndex - 1].alt;
+        document.getElementsByClassName("muGenesName")[0].innerHTML = y[slideIndex - 1].alt;
     }
 </script>