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.

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();