селекторы css не работают при использовании boostrap

#css #bootstrap-4 #css-selectors

Вопрос:

Я пытаюсь создать простой дизайн с помощью bootstrap… Тем не менее, я столкнулся с проблемой, которая заключается в том, что каждый раз, когда я хочу добавить некоторые изменения в некоторые элементы из CSS, кажется, что ничего не меняется, и это странно, потому что вначале он работал отлично, но затем по какой-либо причине перестал работать. Вот фрагмент кода, который находится в файле PHP:

         <div class="popupbox d-flex flex-column top-0 justify-content-center position-fixed border border-2 border-dark">
            <p class="mensaje text-center">hola</p>
        </div>  

    <div class="background">

        <div class="contenedor">
            <div class="contenedor-margen container p-5">
                    <div class="separacion">
                        <h2 class="form_titulo text-center">Registrar</h2>
                    </div>
            </div>
     </div>
 

Здесь я пытаюсь отредактировать всплывающее окно со следующим кодом:

 .popupbox{
    width: 500px;
    height: 200px;
    background: red;
}

.background{
    width: 100%;
    height: 100vh;
    background:#171717;
    display: flex;
    flex-direction: row;
}

.contenedor{
    height: 100%;
    width: 40%;
    background: #EDEDED;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

 

Как я уже говорил, селекторы CSS работали отлично, я мог судить об этом по элементам .background и .contenedor. Еще две вещи, которые нужно сказать: использование атрибута style=»фон:красный; ширина:500 пикселей; высота:200 пикселей;» это работает, но не в файле CSS, и когда я хочу удалить свойство любого элемента в CSS, оно не может быть удалено… Я этого не понимаю