Fix horizontal scrollbar appearing in docs (#21747)

On small screens (< 576px), all documentation pages containing
`.bd-example` styled tags, show the horizontal scrollbar because of a
wrong horizontal margin property.

This PR sets the horizontal margin on gutter width basis instead of rem.

diff --git a/docs/assets/scss/_component-examples.scss b/docs/assets/scss/_component-examples.scss
index cea237de0cc2b60d36decc4ab99689f835093516..ab3a48dde2eedbd215b0fa56805f5e93696780a4 100644 (file)
--- a/docs/assets/scss/_component-examples.scss
+++ b/docs/assets/scss/_component-examples.scss
@@ -83,7 +83,7 @@
 .bd-example {
   position: relative;
   padding: 1rem;
-  margin: 1rem -1rem;
+  margin: 1rem (-$grid-gutter-width-base / 2);
   border: solid #f7f7f9;
   border-width: .2rem 0 0;
   @include clearfix();