Make custom max-width on row conform to Boostrap convention

Bootstrap break point for tablet portrait 768 keeps the row intact, so it's not appropriate to have off-canvas elements at that width. Custom off-canvas.css should be breakpoint 767px
Prevent X-scroll on small screens

html overflow-x must be hidden to prevent accidental x-scroll on small screens. This is more apparent with touch screens, where the user often gestures diagonally instead of a true vertical gesture.
Merge pull request #10227 from UTCWebDev/master

Fixes 10212 - Make custom max-width on row conform to Bootstrap convention