[css-align-3] Example 3 changing the order of images to match the text (#10598)

* [css-align-3] example 3 changing the order of images to match the text

* [css-align-3] Fix broken link

* Revert "[css-align-3] Fix broken link"

This reverts commit 5a574ff.

* Rewrite slightly

Fixed a missing word, and rearranged the text a bit to avoid a huge (italicized, centered) caption.

---------

Co-authored-by: Tab Atkins Jr. <jackalmage@gmail.com>

Author: alkorlos

css-align-3/Overview.bs

@@ -812,36 +812,42 @@ Overflow Alignment: the ''safe'' and ''unsafe'' keywords and scroll safety limit
 			}
 			</style>
 			<div style="display:table; margin: 0 auto 1em;">
-				<div style="display:table-cell; padding-right: 50px;" class='cross-auto-figure'>
+				<div style="display:table-cell; padding-right: 70px;" class='cross-auto-figure'>
 					<div>
 						<div>About</div>
-						<div style="white-space: nowrap; margin-left: -31px;">Authoritarianism</div>
+						<div style="white-space: nowrap;">Authoritarianism</div>
 						<div>Blog</div>
 					</div>
 				</div>
-				<div style="display:table-cell; padding-left: 50px;" class='cross-auto-figure'>
+				<div style="display:table-cell; padding-left: 70px;" class='cross-auto-figure'>
 					<div>
 						<div>About</div>
-						<div style="white-space: nowrap;">Authoritarianism</div>
+						<div style="white-space: nowrap; margin-left: -31px;">Authoritarianism</div>
 						<div>Blog</div>
 					</div>
 				</div>
 			</div>
 			<figcaption>
-				The items in the figure on the left are all strictly centered,
-				even if the one that is too long to fit overflows on both sides,
-				while those in the figure on the right are centered unless they overflow,
-				in which case all the overflow goes off the end edge.
-				If the container was placed
-				against the left edge of the page,
-				the “safe” behavior would be more desirable,
-				as the long item would be fully readable,
-				rather than clipped by the left edge of the screen.
-				In other circumstances,
-				the “unsafe” centering behavior might be better,
-				as it correctly centers all the items.
+				An example of "safe" (on the left)
+				vs "unsafe" (on the right)
+				centering,
+				when the centered item is larger than its container.
 			</figcaption>
 		</figure>
+
+		The items in the figure on the left are centered unless they overflow,
+		in which case all the overflow goes off the end edge,
+		while those in the figure on the right are are all strictly centered,
+		even if the one that is too long to fit overflows on both sides.
+
+		If the container was placed
+		against the left edge of the page,
+		the “safe” behavior would be more desirable,
+		as the long item would be fully readable,
+		rather than clipped by the left edge of the screen.
+		In other circumstances,
+		the “unsafe” centering behavior might be better,
+		as it correctly centers all the items.
 	</div>
 
 	To control this situation,