Actually, the solution you’ve implemented is generally correct, but you might encounter issues in such cases. That is, you need to create a specific situation for the page. Anyway, would you mind trying the following code? I wrote it for the login page. It’s also a good idea to check for conflicts in other parts of the site. The ‘#656262’ in the border section is a color code. You can use the Eye Dropper extension in Chrome to grab the color code you want and paste it here. With a few trial and error attempts, you’ll figure it out.
@media (min-width: 991.98px){
.page-width.page-width--tiny.page-content > .section-header {
margin-left: auto;
margin-right: auto;
width: 50%;
}
.page-width.page-width--tiny.page-content > #CustomerLoginForm {
width: 50%;
margin-left: auto;
margin-right: auto;
}
}