changes in nav bar- formatting

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

style.css

@@ -43,58 +43,41 @@ html,body{
     height: auto; 
 }
 
-
 /*navbar*/
-
-  .navbar-list {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    color: white;
-  }
-
-  .navbar-list li {
-    display: inline-block; 
-    color: white;
-  }
-
-  /* Dark Mode */
-  @media (prefers-color-scheme: dark) {
-    .header {
-        background-color: darkslategray; /* Change to your desired dark color */
-    }
-
-    .navbar-list li {
-        color: white; /* Ensure text is readable in dark mode */
-    }
-  }
-
-
-  /*-----navbar------*/
-      .navbar{
-          display: flex;
-          align-items: center;
-          gap: 40px;
-      }
-      .navbar-list{
-      list-style-type: none;
-      margin: 0;
-      padding: 0;
-      display: flex;
-  }
-
-  .navbar-list li a{
-      display: inline-block; 
-      font-size: 15px;
-      text-decoration: none;
-  }
-  .navbar-list li a:hover{
-    transform: scale(1.3); /* Adjust the scale value as needed */
-    transition: transform 0.3s ease; /* Smooth zoom-in effect */
-    color: black;
-    text-decoration: none;
-  }
-
+.navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between; 
+  width: 100%;
+}
+
+.navbar-list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: space-evenly; 
+  flex-grow: 1; 
+}
+
+.navbar-list li {
+  flex: 1; 
+  text-align: center; 
+}
+
+.navbar-list li a {
+  font-size: 18px; 
+  text-decoration: none;
+  color: white; 
+  padding: 10px 0;
+}
+
+.navbar-list li a:hover {
+  transform: scale(1.1); 
+  transition: transform 0.3s ease;
+  color: black;
+}
+
   header{
   display: flex;
   justify-content: space-between;