1 files changed, 6 insertions, 6 deletions
diff --git a/site/content/docs/5.2/layout/gutters.md b/site/content/docs/5.2/layout/gutters.md
index 9ea13e4ab2..1cb68303f1 100644
--- a/site/content/docs/5.2/layout/gutters.md
+++ b/site/content/docs/5.2/layout/gutters.md
@@ -19,7 +19,7 @@ toc: true
 `.gx-*` classes can be used to control the horizontal gutter widths. The `.container` or `.container-fluid` parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility. For example, in the following example we've increased the padding with `.px-4`:
 
 {{< example >}}
-<div class="container px-4">
+<div class="container px-4 text-center">
   <div class="row gx-5">
     <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
@@ -34,7 +34,7 @@ toc: true
 An alternative solution is to add a wrapper around the `.row` with the `.overflow-hidden` class:
 
 {{< example >}}
-<div class="container overflow-hidden">
+<div class="container overflow-hidden text-center">
   <div class="row gx-5">
     <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
@@ -51,7 +51,7 @@ An alternative solution is to add a wrapper around the `.row` with the `.overflo
 `.gy-*` classes can be used to control the vertical gutter widths. Like the horizontal gutters, the vertical gutters can cause some overflow below the `.row` at the end of a page. If this occurs, you add a wrapper around `.row` with the `.overflow-hidden` class:
 
 {{< example >}}
-<div class="container overflow-hidden">
+<div class="container overflow-hidden text-center">
   <div class="row gy-5">
     <div class="col-6">
       <div class="p-3 border bg-light">Custom column padding</div>
@@ -74,7 +74,7 @@ An alternative solution is to add a wrapper around the `.row` with the `.overflo
 `.g-*` classes can be used to control the horizontal gutter widths, for the following example we use a smaller gutter width, so there won't be a need to add the `.overflow-hidden` wrapper class.
 
 {{< example >}}
-<div class="container">
+<div class="container text-center">
   <div class="row g-2">
     <div class="col-6">
       <div class="p-3 border bg-light">Custom column padding</div>
@@ -97,7 +97,7 @@ An alternative solution is to add a wrapper around the `.row` with the `.overflo
 Gutter classes can also be added to [row columns]({{< docsref "/layout/grid#row-columns" >}}). In the following example, we use responsive row columns and responsive gutter classes.
 
 {{< example >}}
-<div class="container">
+<div class="container text-center">
   <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
     <div class="col">
       <div class="p-3 border bg-light">Row column</div>
@@ -142,7 +142,7 @@ The gutters between columns in our predefined grid classes can be removed with `
 In practice, here's how it looks. Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).
 
 {{< example class="bd-example-row" >}}
-<div class="row g-0">
+<div class="row g-0 text-center">
   <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
   <div class="col-6 col-md-4">.col-6 .col-md-4</div>
 </div>