I have a navbar react component that is floating and looks like this:

When I am trying to replicate this, my navbar tends to move to the right when the screen size is decreased by a few pixels.

<nav className="w-full fixed z-50 transition-all duration-300 ">
      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 bg-neutral-50 dark:bg-neutral-950 rounded-full border border-border backdrop-blur-xl mt-5">
        <div className="flex justify-between items-center py-4">
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi, magni.</p>
        </div>
      </div>

    </nav>

The above code produces a navbar like this:

I tried adding a padding of 80rem on left and right side of the <nav> tag but it did not work. So, I tried by adding a max width but that did not work either.