خطأ في تنسيق قائمة التنقل باستخدام Bootstrap

    <div class="navbar navbaar-expand bg-dark navbar-dark text-white">
        <div class="container">Boot strap Tutorial<a href="#"class="navbar-brand"><a>
            <div class="colapse navbar-colapse">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a href="#intro" class="nav-link">About us</a></li>
                    
                    <li class="nav-item"><a href="#fag" class="nav-link">News</a></li>
                    
                    <li class="nav-item"><a href="#youtube" class="nav-link">Buy</a></li>
                </ul>
            </div>
        </div>
    </div>

لماذا يقوم بعرض العناصر فوق بعضها البعض وليس بجانب بعضها البعض