Fixed visual nitpicks

components/Header.module.css

@@ -33,6 +33,8 @@
 
 .sideBarShown {
   composes: sideBarCommon;
+  /* -1% to hide slight line tip showing in some browsers */
+  transform: translateX(-1%);
 }
 
 .sideBarHidden {
@@ -67,7 +69,7 @@
 
 .menuHeader {
   margin-bottom: 0;
-  padding-left: calc(20rem / 16);
+  padding-left: calc(30rem / 16);
   padding-bottom: 0;
   color: var(--dark--secondary-heading);
 }
@@ -94,7 +96,7 @@
   }
 
   .menuHeader {
-    padding-left: calc(10rem / 16);
+    padding-left: calc(20rem / 16);
   }
 
   .sectionsWrapper {
@@ -113,6 +115,8 @@
   display: flex;
   flex-direction: row;
   margin-left: calc(20rem / 16);
+  /* transparent border fixes weird coloring on the border in some browsers */
+  border: calc(1rem / 16) solid transparent;
 }
 
 .closeMenuButton:hover {

components/Header.tsx

@@ -1,4 +1,5 @@
 import { sectionsData } from "data/routes";
+import Image from "next/image";
 import Link from "next/link";
 import React, { useState } from "react";
 
@@ -31,7 +32,12 @@ export function Header() {
           }}
           className={styles.menuIcon}
         >
-          <img src="/images/menuIcon.svg" width="50" draggable="false" />
+          <Image
+            src="/images/menuIcon.svg"
+            width="50"
+            height="50"
+            draggable="false"
+          />
         </button>
       </div>
 
@@ -46,7 +52,7 @@ export function Header() {
               setIsShowingMenu(false);
             }}
           >
-            <img
+            <Image
               src="/images/rightArrow.svg"
               className={styles.arrowIcon}
               width="50"