مشکل در collapse بوت استرپ

سلام ، من از بوت استرپ استفاده میکنم و یه منو ساختم که collapse داره و وقتی عملات اون اجرا میشه المنت هایی که بالای اون هست حرکت میکنه در صورتی که اشتباه هست

توی ویدئو مشخص هست http://uupload.ir/view/277f_untitled_project.mp4/

این هم کد

<ul class="navigation navigation-main navbar-nav nav mt-3">
    <li class="nav-item">
        <a href="#" class="text-black-50 font-medium-1">
            <i class="far fa-headset font-medium-5"></i>
            <span class="ml-1">بازی ها</span>
        </a>
    </li>
    <li class="nav-item mt-3 bg-white rounded p-1 mt-1">
        <a href="#collapse1" class="text-black-50 font-medium-1 d-flex align-items-center" data-toggle="collapse">
            <i class="bx bxs-grid-alt"></i>
            <span style="margin-right: 3px;">دسته بندی</span>
            <i class='bx bx-chevron-left ml-auto font-medium-5'></i>
        </a>
        <ul class="collapse navbar-nav mt-2 flex-column" id="collapse1">
            <li class="nav-item">
                <a href="#" class="nav-link text-black-50 d-flex align-items-center">
                    <i class='bx bx-left-arrow-alt'></i>
                    <span class="ml-1">استراتژی</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link text-black-50 d-flex align-items-center">
                    <i class='bx bx-left-arrow-alt'></i>
                    <span class="ml-1">اکشن</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link text-black-50 d-flex align-items-center">
                    <i class='bx bx-left-arrow-alt'></i>
                    <span class="ml-1">امتیازی</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link text-black-50 d-flex align-items-center">
                    <i class='bx bx-left-arrow-alt'></i>
                    <span class="ml-1">تفننی</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link text-black-50 d-flex align-items-center">
                    <i class='bx bx-left-arrow-alt'></i>
                    <span class="ml-1">شبیه سازی</span>
                </a>
            </li>
        </ul>
    </li>

</ul>

کد های زیاده ولی اگه یکی کمک کنه ممنون میشم 🙏