Rearrange margins for .highlight (#23396)

Only applies the margins to .highlight instances within .bd-content, thus negating any need for #23279.

1 files changed, 11 insertions, 1 deletions

diff --git a/assets/scss/_component-examples.scss b/assets/scss/_component-examples.scss
index 629adcbec..5779825cf 100644
--- a/assets/scss/_component-examples.scss
+++ b/assets/scss/_component-examples.scss
@@ -392,16 +392,26 @@
 
 .highlight {
   padding: 1rem;
-  margin: 1rem (-$grid-gutter-width / 2);
+  margin-top: 1rem;
+  margin-bottom: 1rem;
   background-color: #f7f7f9;
   -ms-overflow-style: -ms-autohiding-scrollbar;
 
   @include media-breakpoint-up(sm) {
     padding: 1.5rem;
+  }
+}
+
+.bd-content .highlight {
+  margin-right: (-$grid-gutter-width / 2);
+  margin-left: (-$grid-gutter-width / 2);
+
+  @include media-breakpoint-up(sm) {
     margin-right: 0;
     margin-left: 0;
   }
 }
+
 .highlight pre {
   padding: 0;
   margin-top: 0;