класс d-flex в контейнерной жидкости, уменьшая h1 внутри него

Question

Я новичок в этой области, поэтому я надеюсь, что мой вопрос будет написан правильно. Я использую контейнер-жидкость, элементы в нем должны быть в вертикальном центре страницы. элементы - это тег h1 (с цветом фона) и кнопка, я также использовал строку и столбцы. Итак, в курсе, который я беру, учитель использует flex-box для выравнивания элементов по вертикальному центру страницы, но всякий раз, когда я помещаю класс «d-flex» для контейнера-жидкости, фон h1 становится меньше и не занимает всю ширину страницы, как раньше.

это код:

<div class="container-fluid align-items-center h-100 d-flex">
    <div class="row">
        <div class="col-12">
            <header class="text-center">
                <h1><strong>Your Best Working Environment</strong></h1>
            </header>
        </div>
        <div class="col-12">
            <section class="text-center">
                <button class="btn btn-primary btn-xl">Click Here For More Info</button>
            </section>
        </div>
    </div>
</div>

Это изображение, на котором жидкость-контейнер имеет "d- flex "и фон h1 не занимает всю ширину страницы

Это CSS:

body, html{
width: 100%;
height: 100%;
font-family: 'Fira Sans', sans-serif;
background: url(pc.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
margin:0;} 

h1{
padding: 7px;
color: white;
text-align: center;
background-color: rgba(0, 0, 0, 0.6); }

.container-fluid {
padding-right:0;
padding-left:0;
margin-right:auto;
margin-left:auto;}

.flex_centered{
justify-content: center;}

Answer 1

Вы должны указать тегу <header> ширину 100%. В Bootstrap это будет выглядеть так:

<div class="container-fluid align-items-center h-100 d-flex">
    <div class="row">
        <div class="col-12">
            <header class="text-center w-100">
                <h1><strong>Your Bast Working Environment</strong></h1>
            </header>
        </div>
        <div class="col-12">
            <section class="text-center">
                <button class="btn btn-primary btn-xl">Click Here For More Info</button>
            </section>
        </div>
    </div>
</div>