Align navbar in docs (#30359)

diff --git a/site/content/docs/4.3/components/scrollspy.md b/site/content/docs/4.3/components/scrollspy.md
index b390ddf9e23c40b94882e86acb80f21b503fa9cf..51c109df40fdf16a9e7b0bfec10ca1768899cc43 100644 (file)
--- a/site/content/docs/4.3/components/scrollspy.md
+++ b/site/content/docs/4.3/components/scrollspy.md
@@ -22,7 +22,7 @@ When successfully implemented, your nav or list group will update accordingly, m
 Scroll the area below the navbar and watch the active class change. The dropdown items will be highlighted as well.
 
 <div class="bd-example">
-  <nav id="navbar-example2" class="navbar navbar-light bg-light">
+  <nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
     <a class="navbar-brand" href="#">Navbar</a>
     <ul class="nav nav-pills">
       <li class="nav-item">
@@ -33,7 +33,7 @@ Scroll the area below the navbar and watch the active class change. The dropdown
       </li>
       <li class="nav-item dropdown">
         <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
-        <div class="dropdown-menu">
+        <div class="dropdown-menu dropdown-menu-right">
           <a class="dropdown-item" href="#one">one</a>
           <a class="dropdown-item" href="#two">two</a>
           <div role="separator" class="dropdown-divider"></div>
@@ -59,7 +59,7 @@ Scroll the area below the navbar and watch the active class change. The dropdown
 </div>
 
 {{< highlight html >}}
-<nav id="navbar-example2" class="navbar navbar-light bg-light">
+<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
   <a class="navbar-brand" href="#">Navbar</a>
   <ul class="nav nav-pills">
     <li class="nav-item">
@@ -70,7 +70,7 @@ Scroll the area below the navbar and watch the active class change. The dropdown
     </li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
-      <div class="dropdown-menu">
+      <div class="dropdown-menu dropdown-menu-right">
         <a class="dropdown-item" href="#one">one</a>
         <a class="dropdown-item" href="#two">two</a>
         <div role="separator" class="dropdown-divider"></div>