I think the topbar is broken, I see 5 links one below the other

components/header.js

@@ -5,8 +5,10 @@ class CustomHeader extends HTMLElement {
       <style>
         nav {
           font-family: 'Comic Sans MS', cursive, sans-serif;
+          display: flex;
+          align-items: center;
         }
-        .nav-link:hover {
+.nav-link:hover {
           transform: translateY(-2px);
         }
         .nav-link::after {
@@ -27,16 +29,13 @@ class CustomHeader extends HTMLElement {
             <span class="text-2xl font-bold bg-blossom-500 text-white px-3 py-1 rounded-full">🐢</span>
             <span class="text-xl font-bold">Turtle Haven</span>
           </a>
-          <div class="hidden md:flex items-center gap-8">
-            <a href="#turtles" class="nav-link text-white font-medium transition-all">Meet Turtles</a>
+          <div class="hidden md:flex items-center gap-8" style="display: flex;">
+<a href="#turtles" class="nav-link text-white font-medium transition-all">Meet Turtles</a>
             <a href="#" class="nav-link text-white font-medium transition-all">Turtle Facts</a>
             <a href="#" class="nav-link text-white font-medium transition-all">Conservation</a>
             <a href="#" class="bg-blossom-500 hover:bg-blossom-600 text-white font-bold py-2 px-4 rounded-full transition-all">Adopt a Turtle</a>
           </div>
-          <button class="md:hidden text-white">
-            <i data-feather="menu"></i>
-          </button>
-        </nav>
+</nav>
       </header>
     `;
   }