fixed element not filling the full width of the screen tailwind

I'm trying to fill the width of a fixed element in Tailwind to full width.

here's a screenshot of the modal:
Modal Screenshot

please ignore the text inside it as I'm still testing stuff out.

my code React:

import { Dialog, Transition } from '@headlessui/react'
import { Fragment, useState } from 'react'
import { Link } from 'react-router-dom'

export default function Modal2() {
  let [isOpen, setIsOpen] = useState(true)

  function closeModal() {
    setIsOpen(false)
  }

  function openModal() {
    setIsOpen(true)
  }

  return (
    <>
      <div className=" absolute right-1 top-5 p-2">
        <button
          type="button"
          onClick={openModal}
          className="flex   rounded-3xl pl-6 pr-6  bb  p-2 "
        >
          Open dialog
        </button>
      </div>

      <Transition appear show={isOpen} as={Fragment}>
        <Dialog as="div" className="relative  z-10 " onClose={closeModal}>
          <Transition.Child
            as={Fragment}
            enter="ease-out duration-300"
            enterFrom="opacity-0"
            enterTo="opacity-100"
            leave="ease-in duration-200"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <div className="fixed  flex  inset-0 bg-black bg-opacity-80 blur2 " />
          </Transition.Child>

          <div className="fixed top-20 right-2  overflow-y-auto ">
            <div className="flex   justify-center p-4 text-center">
              <Transition.Child
                as={Fragment}
                enter="ease-out duration-300"
                enterFrom="opacity-0 scale-95"
                enterTo="opacity-100 scale-100"
                leave="ease-in duration-200"
                leaveFrom="opacity-100 scale-100"
                leaveTo="opacity-0 scale-95"
              >
                <Dialog.Panel className="mb-10  w-full max-w-md  transform overflow-hidden  rounded-3xl bg-white p-6 text-left align-top shadow-xl transition-all">
                  <Dialog.Title
                    as="h3"
                    className="text-lg font-medium leading-6 text-gray-900"
                  >
                    Lorem, ipsum dolor.
                  </Dialog.Title>
                  <div className="mt-2">
                    <p className=" flex flex-col text-md text-gray-500">
                      <Link to={"/about"} className="py-1 ">dada</Link>
                      <span className='h  bg-red-600'></span>
                      <Link className="py-1 " to={""}>dada</Link>
                      <span className='h  bg-red-600'></span>
                      <Link className="py-1 " to={""}>dada</Link>
                      <span className='h  bg-red-600'></span>
                      <Link className="py-1 " to={""}>dada</Link>
                    </p>
                  </div>

                  <div className="mt-4">
                    <button
                      type="button"
                      className="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
                      onClick={closeModal}
                    >
                      Got it, thanks!
                    </button>
                  </div>
                </Dialog.Panel>
              </Transition.Child>
            </div>
          </div>
        </Dialog>
      </Transition>
    </>
  )
}

this is the line that opens the Modal. I want to make the width stretch to full-screen width. :

  <div className="fixed  flex  inset-0 bg-black bg-opacity-80 blur2 " />

I would appreciate any help.

I tried to use items-stretch and w-full. didn't work. I guess its because it's fixed.

I couldn't reproduce your problem exactly, so this might be off.

If I understand your goal correctly, you're targeting the wrong element. The Dialog component contains your modal, so that's the component which should
have display: flex and justify-content: center to centralize the modal horizontally.

So you should add the classes flex and justify-center to the Dialog component. You can also add items-center to centralize it vertically.

[...]
<Transition appear show={isOpen} as={Fragment}>
        <Dialog as="div" className="relative z-10 flex justify-center" onClose={closeModal}>
[...]