[css-nav-1] Fix / clean up examples

Author: frivoal

css-nav-1/Overview.bs

@@ -505,11 +505,11 @@ Note: the {{focusableAreas()}} and {{getSpatialNavigationContainer()}} methods a
 
     <pre><code highlight=markup>
     &lt;body>
-        &lt;button class="box">&lt;/button>
-        &lt;div class="container" style="width:300px; height:200px; overflow-x: scroll;">
-            &lt;button class="box" style="left:25px;">&lt;/button>
-            &lt;button class="box" style="left:150px;">&lt;/button>
-            &lt;button class="box" style="left:350px;">&lt;/button>
+        &lt;button>&lt;/button>
+        &lt;div style="width:300px; height:200px; overflow-x: scroll;">
+            &lt;button style="left:25px;">&lt;/button>
+            &lt;button style="left:150px;">&lt;/button>
+            &lt;button style="left:350px;">&lt;/button>
         &lt;/div>
     &lt;/body>
     </code></pre>
@@ -559,7 +559,7 @@ and the result will be <code>null</code>.</strong>
         while (target.isSameNode(target.getSpatialNavigationContainer())) {
             const areas = target.focusableAreas();
 
-            if (areas.length === 0) { target.navigate(e.dir); }
+            if (areas.length === 0) { break; }
 
             target = target.spatialNavigationSearch({
                 dir:  e.dir,
@@ -1390,18 +1390,18 @@ the proper spatial navigation behavior.
 <div class=example>
 In this example, a scrollable container is specified with <code highlight=css>spatial-navigation-action: focus</code>.
 Inside the container, there is an element which is out of the view within a <a>scrollport</a>.
-Pressing the right arrow key moves the focus directly to it without scrolling manually.
+Pressing the down arrow key moves the focus directly to it without scrolling manually.
 
     <figure>
         <img alt="" src="images/spatnav-action.png" style="width: 500px;"/>
         <figcaption>Moving focus from "Box 2" to "Box 3" without manually scrolling</figcaption>
     </figure>
 
     <pre><code highlight=markup>
-        &lt;div class = 'scroller'>
-            &lt;button class = 'item'>Box 1&lt;/button>
-            &lt;button class = 'item'>Box 2&lt;/button>
-            &lt;button class = 'item'>Box 3&lt;/button>
+        &lt;div class='scroller'>
+            &lt;button class='item'>Box 1&lt;/button>
+            &lt;button class='item'>Box 2&lt;/button>
+            &lt;button class='item'>Box 3&lt;/button>
         &lt;/div>
     </code></pre>
     <pre><code highlight=css>