Change sm grid breakpoint and container max-width

Makes it so that the container is no longer wider than the breakpoint used in the media query. This was never really an issue in rendering as the max-width handled it appropriately, but the mismatch was still incorrect.

Fixes #18054

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 52bd0eb8175a0e8142b5931a30fef741fc6c7eb9..9f6823978284a5df724004c6538fccc5a6a5067f 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -125,7 +125,7 @@ $link-hover-decoration: underline !default;
 
 $grid-breakpoints: (
   xs: 0,
-  sm: 544px,
+  sm: 576px,
   md: 768px,
   lg: 992px,
   xl: 1200px
@@ -138,7 +138,7 @@ $grid-breakpoints: (
 // Define the maximum width of `.container` for different screen sizes.
 
 $container-max-widths: (
-  sm: 576px,
+  sm: 540px,
   md: 720px,
   lg: 940px,
   xl: 1140px