Salut tout le monde, j’ai un problème. Quand j’essaie de fixer l’image, elle prend toute la largeur de l’écran et la div avec la classe “col span-1” se place derrière, en utilisant la propriété fixed. Est-ce que quelqu’un pourrait m’aider à résoudre cela et à mieux comprendre ?

<div className="h-[100vh]">
        <div className="lg:grid grid-cols-3 w-full h-full">
          <div className="col-span-2 h-full  lg:block hidden top-0 bg-gray-500  ">
            {" "}
            <div
              className="h-full bg-cover bg-center  top-0  left-0 bottom-0"
              style={{ backgroundImage: `url(${img})` }}
            ></div>
          </div>

          <div id="content-wraper" className="col-span-1 bg-white h-full    ">
            <div className="left-0 boor">salut</div>
            <div className="flex items-center justify-center">
              <div id="main-content" className=" max-w-sm h-full ">
                <div className=" flex items-center justify-center p-10">
                  <img
                    src={logo}
                    className="block btn- h-[50px]  w-auto "
                    alt=""
                  />
                </div>
                <div>
                  <h6 className="text-gray-800 font-semibold text-2xl mb-5 text-center ">
                    {" "}
                    Connexion
                  </h6>
                </div>
                <div className="mb-5">
                  {" "}
                  <IndexPage />
                  <Separator text="ou" />
                  <Boutton />
                </div>
                <div className="mb-5">
                  <p className=" font-light text-gray-400 text-center text-xs">
                    En continuant, vous acceptez les{" "}
                    <a className="font-medium ">Conditions d'Utilisation</a> et
                    la{" "}
                    <a className="font-medium ">
                      Politique de Confidentialité{" "}
                    </a>{" "}
                    de la société .
                  </p>
                </div>
                <div className=" flex flex-col justify-center items-center text-sm">
                  <p className="font-medium text-gray-800 ">
                    Vous n'êtes pas encore inscrit ?
                  </p>
                  <a
                    href="/auth/sign-up/default"
                    className=" font-medium text-yellow-500 "
                  >
                    Créer un compte
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>