Adjust examples

After moving the default padding inside the iframe

pages/css/components/forms.md

@@ -256,7 +256,7 @@ You may also add emphasis to the label:
 Content that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live="polite"` attribute on the parent label for added content to be announced when displayed.
 
 ```html
-<form class="pl-2">
+<form>
   <div class="form-checkbox">
     <label>
       <input type="radio" name="hireme">

pages/css/components/labels.md

@@ -57,13 +57,13 @@ Use `Label--orange` to communicate "warning". The orange background color is ver
 Use `Label--outline` to create a label with gray text, a gray border, and a transparent background. The outline reduces the contrast of this label in combination with filled labels. Use this in contexts where you need it to stand out less than other labels and communicate a neutral message.
 
 ```html title="Label outline"
-<span title="Label: outline label" class="Label Label--outline m-0">outlined label</span>
+<span title="Label: outline label" class="Label Label--outline">outlined label</span>
 ```
 
 Use `Label--outline-green` in combination with `Label--outline` to communicate a positive message.
 
 ```html title="Label outline green"
-<span title="Label: green outline label" class="Label Label--outline Label--outline-green m-0">green outlined label</span>
+<span title="Label: green outline label" class="Label Label--outline Label--outline-green">green outlined label</span>
 ```
 
 

pages/css/components/popover.md

@@ -94,7 +94,7 @@ Defaults to caret oriented top-center.
 ### Bottom-right
 
 ```html title="Bottom-right"
-<div class="position-relative text-right pr-3">
+<div class="position-relative text-right pr-2">
   <div class="Popover position-relative">
     <div class="Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large">
       <h4 class="mb-2">Popover heading</h4>
@@ -109,7 +109,7 @@ Defaults to caret oriented top-center.
 ### Bottom-left
 
 ```html title="Bottom-left"
-<div class="Popover position-relative pl-3">
+<div class="Popover position-relative pl-2">
   <div class="Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large">
     <h4 class="mb-2">Popover heading</h4>
     <p>Message about this particular piece of UI.</p>
@@ -212,7 +212,7 @@ Defaults to caret oriented top-center.
 ### Top-left
 
 ```html title="Top-left"
-<div class="position-relative pl-3">
+<div class="position-relative pl-2">
   <button class="btn btn-primary">UI</button>
   <div class="Popover position-relative">
     <div class="Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large">
@@ -227,7 +227,7 @@ Defaults to caret oriented top-center.
 ### Top-right
 
 ```html title="Top-right"
-<div class="position-relative text-right pr-3">
+<div class="position-relative text-right pr-2">
   <button class="btn btn-primary">UI</button>
   <div class="Popover right-0 position-relative">
     <div class="Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large">

pages/css/components/tooltips.md

@@ -25,7 +25,7 @@ Before adding a tooltip, please consider: Is this information essential and nece
 Specify the direction of a tooltip with north, south, east, and west directions:
 
 ```html
-<div class="d-flex flex-justify-center pt-5">
+<div class="d-flex flex-justify-center pt-4">
   <span class="tooltipped tooltipped-nw m-2 p-2 border" aria-label="This is the tooltip on the North West side.">
     .tooltipped-nw
   </span>
@@ -44,7 +44,7 @@ Specify the direction of a tooltip with north, south, east, and west directions:
     .tooltipped-e
   </span>
 </div>
-<div class="d-flex flex-justify-center pb-5">
+<div class="d-flex flex-justify-center pb-4">
   <span class="tooltipped tooltipped-sw m-2 p-2 border" aria-label="This is the tooltip on the South West side.">
     .tooltipped-sw
   </span>
@@ -61,7 +61,7 @@ Specify the direction of a tooltip with north, south, east, and west directions:
 Align tooltips to the left or right of an element, combined with a directional class to specify north or south. Use a modifier of `1` or `2` to choose how much the tooltip's arrow is indented.
 
 ```html
-<div class="d-flex flex-justify-center pt-5">
+<div class="d-flex flex-justify-center pt-4">
   <span class="tooltipped tooltipped-nw tooltipped-align-right-1 m-2 p-2 border" aria-label="Tooltipped NW and aligned right.">
     .tooltipped-nw .tooltipped-align-right-1
   </span>
@@ -85,7 +85,7 @@ Align tooltips to the left or right of an element, combined with a directional c
     .tooltipped-se .tooltipped-align-left-1
   </span>
 </div>
-<div class="d-flex flex-justify-center pb-5">
+<div class="d-flex flex-justify-center pb-4">
   <span class="tooltipped tooltipped-sw tooltipped-align-right-2 m-2 p-2 border" aria-label="Tooltipped SE and aligned right.">
     .tooltipped-sw .tooltipped-align-right-2
   </span>
@@ -112,7 +112,7 @@ Use `.tooltipped-multiline` when you have long content. This style has some limi
 By default the tooltips have a slight delay before appearing. This is to keep multiple tooltips in the UI from being distracting. There is a `.tooltipped-no-delay` modifier class you can use to override this.
 
 ```html
-<div class="d-flex flex-justify-center pt-5">
+<div class="d-flex flex-justify-center pt-4">
   <span class="tooltipped tooltipped-n tooltipped-no-delay m-2 p-2 border" aria-label="This is the tooltip on the no delay side.">
     .tooltipped-no-delay
   </span>

pages/css/utilities/layout.md

@@ -250,7 +250,7 @@ Use `.position-fixed` to position an element relative to the viewport. **Be care
 _Note: This example is shown in an `<iframe>` and therefore will not be positioned to the viewport of this page._
 
 ```html
-<div class="border p-6">
+<div style="height: 64px;">
   <div class="position-fixed right-0 bottom-0 bg-gray-light border p-2">
     .position-fixed
   </div>