How does bootstrap 5 deal with custom ccs styles?

Question

css

Welcome all! I'm slowly getting to grips with web development, writing a site in php using laravel, it came to designing and got stuck. Decided to use bootstrap 5 but don't understand why it is so reluctant to work with my css file. Let's say there is a navbar, I took the code base from the site of the bootstrap itself, in css I want to make the navbar menus dispersed along the length of the entire screen, but no matter what I write in css, nothing changes. CSS is included correctly. Look at the html, please, maybe something is blocking the changes, but I still don’t understand what exactly, I’ve been trying to figure it out on my own for several days ...

<nav class="navbar navbar-expand-lg navbar-light bg-light" id="navbar">
    <div class="container" id="container_navbar">
        <a class="navbar-brand" href="#"><img class="nav-img" src="/img/logo.png" width="70" height="70" alt=""
                class="d-inline-block align-text-top" />Cat chat</a>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Письма</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Задачи</a>
                </li>
                <div class="dropdown text-end" id="navDropdown">
                    <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser1"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
                    </a>
                    <ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1">
                        <li><a class="dropdown-item" href="#">Уведомления</a></li>
                        <li><a class="dropdown-item" href="#">Настройки</a></li>
                        <li><a class="dropdown-item" href="#">Профиль</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="#footer">Выйти</a></li>
                    </ul>
                </div>
            </ul>
        </div>
    </div>
</nav>

Answer 1

Some selectors in bootstrap are written with a bird like .parent>.child and your .child won't override it. Some modifiers generally work with !important, all this is visible in the developer tools

Answer 2

look through the inspector what happens to your styles. maybe you connected them BEFORE the bootstrap, but you need to AFTER. maybe something else is interfering