Update example in CSS sibling-count() function (mdn#40830)

* Update example in CSS `sibling-count()` function

* Update description

* Fix

* Fix syntax

---------

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

Author: ramiy

files/en-us/web/css/sibling-count/index.md

@@ -10,15 +10,15 @@ sidebar: cssref
 
 {{SeeCompatTable}}
 
-The **`sibling-count()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_Value_Functions) returns an integer representing the total number of direct child DOM elements of the parent element on which it is used.
+The **`sibling-count()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_Value_Functions) returns an integer representing the total number of sibling DOM elements (direct children of the parent) of the element on which it is used, including itself.
 
 > [!NOTE]
 > The {{CSSxRef("counter()")}} function provides a similar result but it returns a `<string>`, while `sibling-count()` returns an `<integer>` which can be used for calculations.
 
 ## Syntax
 
-```css
---total-sibling-elements: sibling-count();
+```css-nolint
+sibling-count()
 ```
 
 ### Parameters
@@ -27,13 +27,13 @@ The `sibling-count()` function doesn't accept parameters.
 
 ### Return value
 
-An integer; the total number of direct child DOM elements.
+An integer; the total number of sibling DOM elements including the element itself.
 
 ## Examples
 
 ### Dynamic column count
 
-This example demonstrates setting the number of columns on a container to be equal to the number of its children, enabling placing each child in its own column.
+This example demonstrates setting the width of each item in a list based on the number of items, enabling placing each child in its own column.
 
 #### HTML
 
@@ -45,20 +45,25 @@ We include a {{htmlelement("ul")}} container and several {{htmlelement("li")}} e
   <li>Two</li>
   <li>Three</li>
   <li>Four</li>
+  <li>Five</li>
 </ul>
 ```
 
 #### CSS
 
-We set the {{CSSxRef("column-count")}} of the container to be equal to the quantity of direct children it contains. We also set every odd element to have a {{CSSxRef("background-color")}} to better demonstrate the resulting effect.
+We divide the {{CSSxRef("width")}} of each list item by the number of direct children the list contains. We also set every odd element to have a {{CSSxRef("background-color")}} to better demonstrate the resulting effect.
 
 ```css
 ul {
-  column-count: sibling-count();
-  text-align: center;
   list-style-type: none;
   padding: 0;
   margin: 0;
+  text-align: center;
+  display: flex;
+}
+
+li {
+  width: calc(100% / sibling-count());
 }
 
 li:nth-of-type(odd) {

files/en-us/web/css/sibling-index/index.md

@@ -73,10 +73,8 @@ The **`sibling-index()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/
 
 ## Syntax
 
-```css
-li {
-  width: calc(sibling-index() * 100px);
-}
+```css-nolint
+sibling-index()
 ```
 
 ### Parameters
@@ -126,7 +124,7 @@ This example demonstrates how to create an ordered list using `sibling-index()`,
 We include a {{htmlelement("nav")}} container and several children {{htmlelement("div")}} elements.
 
 ```html
-<nav arial-label="Ordered list">
+<nav aria-label="Ordered list">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>