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:
enter image description here

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

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

>Solution :

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


ul {
   margin : 0;

Leave a Reply