I'm trying to create a portofolio website and whatever I do, this header wont show up
I attached one screenshot, and as you can see the header sits in the corner of the screen for some reason.

import React from 'react';

export default function Header() {
  return (
    <header className="z-[999] relative">
      <div 
              className="fixed top-0 left-1/2 h-[4.5rem] w-full rounded-none border border-white border-opacity-40 bg-white bg-opacity-80 shadow-lg shadow-black/[0.03] backdrop-blur-[0.5rem] sm:top-6 sm:h-[3.25rem] sm:w-[36rem] sm:rounded-full dark:bg-gray-950 dark:border-black/40 dark:bg-opacity-75"
              >
      </div>
    </header>
  );
}

Heres the code of the header. If anyone can help out or point at what im doing wrong would be very helpful
Thank you