another quick fix for some typo and to keep everything lined

about.css

@@ -15,6 +15,18 @@
     margin-right: auto;
 }
 
+.nav a {
+    display: block;
+    color: #222222;
+    text-decoration: none;
+    padding: 8px 12px;
+    border-radius: 6px;
+}
+
+.nav a:hover {
+    background-color: #d0d0d0;
+}
+
 /* External CSS: mengatur layout container utama */
 .flex-container {
     display: flex;

gallery.html

@@ -6,12 +6,12 @@
     <title>Gallery</title>
     <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="box-border">
+<body>
     <!-- Navigation menu untuk berpindah antar halaman website, semua halaman menggunakan navigation yang sama -->
-    <header class="header" >
+    <header class="header">
         <nav class="nav">
-            <ul style="display: flex; justify-content: flex-end; align-items: center; list-style-type: none;gap: 2em; padding: 0%;">
-                <li style="margin-right: auto;"><a href="index.html" target="_self" title="Home">Home</a></li>
+            <ul class="nav-list">
+                <li><a href="index.html" target="_self" title="Home">Home</a></li>
                 <li><a href="about.html" target="_self" title="About me">About</a></li>
                 <li><a href="hobbies.html" target="_self" title="Hobbies">Hobbies</a></li>
                 <li><a href="gallery.html" target="_self" title="Gallery">Gallery</a></li>

hobbies.css

@@ -13,7 +13,7 @@ body {
 
 /* Mengatur posisi header dan navigasi */
 .header {
-    width: min(1500px, calc(100% - 40px));
+    width: min(1500px, 100%);
     margin: 1em auto;
 }
 
@@ -48,7 +48,7 @@ body {
 
 /* Mengatur container utama halaman Hobbies */
 .hobbies-main {
-    width: min(1100px, calc(100% - 40px));
+    width: min(1100px, 100%);
     margin: 0 auto;
 }