make <ul> center vertically by bootstrap

I have this div that is parent for ul. I tried to make ul center vertically but I do not know why I see this situation:

<div className=" d-flex align-items-center bg-primary  ">
            <ul
              className="d-flex align-items-center bg-success"
              style={{ gap: "3em" }}
            >
              <li className="bg-danger">vision</li>
              <li>consorzio</li>
              <li>contatti</li>
            </ul>
          </div>

the bg-success is not got centered in bg-primary div.

>Solution :

Generally ul elements by default have margin you should remove it first :

global.css

ul {
   margin : 0;
}