Frontend: More navbar scuffness

web/Frontend/src/app/page.module.css

@@ -235,20 +235,45 @@
   flex-direction: row;
 }
 
-.navbar {
+ul.navbar {
+  /* position: fixed; */
   background-color: aqua;
-  position: fixed;
-  display: inherit;
-  height: 10vh;
-  width: 100%;
+  /* position: fixed; */
+  /* height: 10vh;
+  width: 100%; */
   flex-wrap: wrap;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
 }
 
-.navbar a {
+.navbar li {
+  float: left;
+}
+
+.navbar li a {
+  display: block;
+  padding: 0.5rem;
+  background-color: #dddddd;
+  height: 10vh;
+}
+.navbar li img {
+  display: block;
+  padding: 0.5rem;
+  background-color: #dddddd;
+  height: 10vh;
+}
+
+/* .navbar a {
   flex: 1;
   padding-left:5rem;
   padding-right:5rem;
   
+} */
+
+.float-right {
+  float : right;
 }
 
 .colLeft {

web/Frontend/src/app/page.tsx

@@ -6,13 +6,14 @@ import Board from '@/components/board'
 export default function Home() {
   return (
     <>
-      <div className={styles.navbar}>
-        <Image src={nextSvg} width={200} height={50} alt={"Zilla"}></Image>
-        <a href="/html/">HTML</a>
-        <a href="/css/">CSS</a>
-        <a href="/js/">JavaScript</a>
-        <a href="/python/">Python</a>
-      </div>
+      <ul className={styles.navbar}>
+        <li><Image src={nextSvg} alt={"Zilla"}></Image></li>
+        <li><a href="/html/">HTML</a></li>
+        <li><a href="/css/">CSS</a></li>
+        <li><a href="/js/">JavaScript</a></li>
+        <li><a href="/python/">Python</a></li>
+        <li style={{float: "right"}}><a href="/python/">About</a></li>
+      </ul>
       <div className={styles.container}>
         <div className={styles.colLeft}>
           <h2>Side Content</h2>