почему может некоректно работать флексбокс и флексврап

я начинающий программист и при работе над примерочным проектом у меня возникла проблема что флекс бокс работал не коректно и совсем не хотел работать флекс врап а вместо желаемых трёх картинок в ряд я получил просто столбец из картинок. прошу помочи как можно быстрее.

это отрывок кода:

    <ul class="products__list">
                <li class="products__item">
                    <div class="products__content">
                        <img src="./img/fingerboard1.jpg" alt="sbego fingerboard" class="products__img">
                        <div class="products__desc">
                            <div class="product__desc-text">
                                So cool fingerboard for 20 dollars.
                            </div>
                            <a href="" class="btn">learn more</a>
                        </div>
                    </div>
                </li>
            </ul>
            <li class="products__item">
                <div class="products__content">
                    <img src="./img/fingerboard2.jpg" alt="sbego fingerboard" class="products__img">
                    <div class="products__desc">
                        <div class="product__desc-text">
                            Not very good fingerboard for 5 dollars.
                        </div>
                        <a href="#" class="btn">learn more</a>
                    </div>
                </div>
            </li>
            <li class="products__item products__item--color-black products__item--size-double">
                <div class="products__content">
                    <img src="./img/fingerboard3.jpg" alt="sbego fingerboard" class="products__img">
                    <div class="products__desc">
                        <div class="product__desc-text">
                           Very good fingerboard for 9 dollars. 
                        </div>
                        <a href="" class="btn">learn more</a>
                    </div>
                </div>
            </li>
            <li class="products__item products__item--color-black products__item--size-double">
                <div class="products__content">
                    <img src="./img/fingerboard4.jpg" alt="sbego fingerboard" class="products__img">
                    <div class="products__desc">
                        <div class="product__desc-text">
                            Normal fingerboard for 16 dollars.
                        </div>
                        <a href="" class="btn">learn more</a>
                    </div>
                </div>
            </li>
            <li class="products__item">
                <div class="products__content">
                    <img src="./img/fingerboard5.jpg" alt="sbego fingerboard" class="products__img">
                    <div class="products__desc">
                        <div class="product__desc-text">
                             Not bad fingerboard for 10 dollars.
                        </div>
                        <a href="" class="btn">learn more</a>
                    </div>
                </div>
            </li>
            <li class="products__item">
                <div class="products__content">
                    <img src="./img/fingerboard6.jpg" alt="sbego fingerboard" class="products__img">
                    <div class="products__desc">
                        <div class="product__desc-text">
                             Not bad fingerboard for 25 dollars.
                        </div>
                        <a href="" class="btn">learn more</a>
                    </div>
                </div>
            </li>

это отрывок CSS в котором проблема:

   .products__list {
display: flex;
flex-wrap: wrap;
width: 100%;
flex-direction: row;
}