Content not centering on XXL +

Webdesign Help
1

Hey everyone, I’ve got my webpage setup to properly center my content on pretty much all breakpoints, but I noticed that once I hit XXL or higher, it’s no longer centered. Can anyone take a quick look and see if they see any code issues?

<body style="background: url('landing_bg.webp') center / cover no-repeat fixed;min-height: 100vh;">
    <div class="container-fluid" style="padding-right: 0;padding-left: 0;margin-right: 0;margin-left: 0;min-height: 100vh;">
        <div class="row flex-grow-1 justify-content-center align-items-center" style="padding-bottom: 0px;min-height: 100vh;margin: 0;">
            <div class="col-sm-12 col-md-12 col-lg-10 col-xl-10 col-xxl-10 text-center d-block"><img class="img-fluid d-lg-none" src="banner_tall.webp" /><img class="img-fluid d-none d-lg-block" src="banner.webp" /></div>
        </div>
    </div>
</body>
3

You can do it like this

<body style="background: url('landing_bg.webp') center / cover no-repeat;">
	<div class="container-fluid d-flex justify-content-center align-items-center min-vh-100">
		<div class="row">
			<div class="col-lg-10 mx-auto">
				<img class="img-fluid d-lg-none" src="banner.webp" alt="banner">
				<img class="img-fluid d-none d-lg-block" src="banner_tall.webp" alt="banner">
			</div>
		</div>
	</div>
</body>
4

Bootstrap is mobile-first, and as long as you design your website in the mobile (xs) view, you will not have any issues with layout, because those settings will be global for all scales. The moment you leave the mobile (xs) view to make changes, only those particular settings will be applied at that scale. If you design your website in any other view apart from mobile (xs) first, then your layout will be all messed up across the board, and you will have to configure every single setting for all the different scales. Additionally, it’s a good idea to stick with flexbox for all your layout work; you don’t need to use any other layout mode.