It is a weird edge case I found when rewriting a lot of Bootstrap's official snippets, because they tend to do a lot of weird layout shifts on its own breakpoints. On occasion, you will find one .container
class that keeps on activating horizontal scroll no matter no much you strip out and add over a lot of code. With much debugging, I found that display: inline is causing this weird edge case. If your container class is one that intends to occupy its own block, like banners and jumbotrons, simply add .d-block
beside the .container
class.