Got the visuals back

Workly/src/App.css

@@ -16,7 +16,7 @@
 
 
 
-.Header {
+.navbar {
   color: black;
   display: flex;
   justify-content: space-between;
@@ -29,7 +29,7 @@
   box-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
 }
 
-.Header .Title
+.navbar .Title
 {
   text-decoration: none; 
   color: black;
@@ -38,49 +38,22 @@
   letter-spacing: 0.4rem;
 }
 
-.Header ul
+.navbar ul
 {
   list-style-type: none;
   display: flex;
   gap: 3.5rem;
 }
 
-.Header li a
+.navbar li a
 {
   text-decoration: none;
   color: black;
 }
 
-.navbar {
-  background-color: #ffffff;
-  padding: 1rem;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-  width: 100%;
-}
 
-.navbar-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  max-width: 1200px;
-  margin: 0 auto;
-}
 
-.nav-links {
-  display: flex;
-  gap: 1rem;
-}
 
-.nav-links a {
-  text-decoration: none;
-  color: #333;
-}
 
-.Title {
-  font-size: 1.5rem;
-  font-weight: bold;
-  text-decoration: none;
-  color: #333;
-}
 
 

Workly/src/components/Navbar.tsx

@@ -4,13 +4,12 @@ import "../App.css"
 const Navbar = () => {
   return (
     <nav className="navbar">
-      <div className="navbar-container">
-        <a href="/" className='Title'>WORKLY.</a>
-        <div className="nav-links">
-          <Link to="/">Home</Link>
-          <Link to="/about">About</Link>
-        </div>
-      </div>
+      <a href="/" className='Title'>WORKLY.</a>
+      <ul>
+        <li><a href="/">Home</a></li>
+        <li><a href="/">About</a></li>
+        <li><a href="/">Contact</a></li>
+      </ul>
     </nav>
   );
 };