Fix wording and punctuation in background-position doc (#32442)

* Fix wording and punctuation in background-position 2-value syntax

* Apply suggestions from code review

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>

* Apply suggestion

---------

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>

files/en-us/web/css/background-position/index.md

@@ -67,7 +67,7 @@ The `background-position` property is specified as one or more `<position>` valu
     - One of the keyword values `top`, `left`, `bottom`, or `right`. If `left` or `right` is given, then this defines X and the other given value defines Y. If `top` or `bottom` is given, then this defines Y and the other value defines X.
     - A {{cssxref("&lt;length&gt;")}} or {{cssxref("&lt;percentage&gt;")}}. If the other value is `left` or `right`, then this value defines Y, relative to the top edge. If the other value is `top` or `bottom`, then this value defines X, relative to the left edge. If both values are `<length>` or `<percentage>` values, then the first defines X and the second Y.
     - Note that: If one value is `top` or `bottom`, then the other value may not be `top` or `bottom`. If one value is `left` or `right`, then the other value may not be `left` or `right`. This means, e.g., that `top top` and `left right` are not valid.
-    - Order: When pairing keywords, placement is not important as the browser can reorder it; the value `top left` or `left top` will yield the same result. With pairing {{cssxref("&lt;length&gt;")}} or {{cssxref("&lt;percentage&gt;")}} with a keyword, the placement is important, the value defining X should come first followed by Y, the value `right 20px` is not the same as `20px right` the former is valid but the latter is invalid. The value `left 20%` or `20% bottom` is valid as X and Y values are clearly defined and the placement is right.
+    - Order: When pairing keywords, placement is not important as the browser can reorder it; the values `top left` and `left top` will yield the same result. When pairing {{cssxref("&lt;length&gt;")}} or {{cssxref("&lt;percentage&gt;")}} with a keyword, the placement is important: the value defining X should come first followed by Y, so for example the value `right 20px` is valid while `20px right` is invalid. The values `left 20%` and `20% bottom` are valid as X and Y values are clearly defined and the placement is correct.
     - The default value is `left top` or `0% 0%`.
 
     **3-value syntax:** Two values are keyword values, and the third is the offset for the preceding value: