html - Bootstrap 5 Justify Content Center + Container Fluid Causing Unexpected Behavior

Question

I'm trying to create a div that takes up 8 columns, centered, in a large viewport, and takes up all 12 columns, centered, in all other viewports.

I tried to achieve this with justify-content-center, but for some reason it is not centering the content on small viewports:

Large viewports: content is centered as expected:

Small viewports: content is off-center slightly:

Here is the code:

<div class="row container-fluid justify-content-center">
    <div class="main-container p-3 m-3 col-lg-8">
        (text)
    </div>
</div>

标签： htmlcssbootstrap-5

Answer 1

I was able to achieve the desired effect with the following:

<div class="container-fluid">
    <div class="row justify-content-center p-3">
        <div class="main-container p-3 col-lg-8">
            (text)
        </div>
    </div>
</div>