[css-nav-1] Tweak description of the example

Author: Jihye Hong

css-nav-1/Overview.bs

@@ -547,7 +547,7 @@ the User Agent must run the steps described below:
     5. If <var>insideFirst</var> is <code>true</code>,
         then let <var>bestCandidate</var> be the result of <a>selecting the best candidate</a> within element with <var>direction</var>.
         * If <var>bestCandidate</var> is not <code>null</code>, return <var>bestCandidate</var>. 
-        * Else, fallback to the next step.
+        * Else, fall back to the next step.
     6. Return the result of <a>selecting the best candidate</a> within <var>areas</var> in <var>direction</var> from the element.
 
 Note: When neither a container nor a list of candidates is provided,
@@ -625,29 +625,33 @@ and the result will be <code>null</code>.</em>
 </div>
 
 <div class=example id=searchInside>
-    This example shows how the different result of {{Element/spatialNavigationSearch()}}
+    This example shows different results of {{Element/spatialNavigationSearch()}}
     depending on the value of {{SpatialNavigationSearchOptions/inside}} attribute.
 
     When the page has the code snippet as below,
 
     <pre><code highlight=markup>
     &lt;body>
-        &lt;div id="container" style="width:300px; height:200px; overflow-x: scroll;">
-            &lt;button id="button1">&lt;/button>
+        &lt;div id="container" style="width:300px; height:200px; overflow-y: scroll;">
+            &lt;button id="button1" style = "width:50px; height:50px;">&lt;/button>
         &lt;/div>
-        &lt;button id="button2">&lt;/button>
+        &lt;button id="button2" style = "width:50px; height:50px;">&lt;/button>
     &lt;/body>
     </code></pre>
 
     <pre><code highlight=javascript>
         const container = document.getElementById('container');
 
-        const insideBtn = container.spatialNavigationSearch('right', {inside: true});
-        const outsideBtn = container.spatialNavigationSearch('right');
+        const innerBtn = container.spatialNavigationSearch('down', {inside: true});
+        const outerBtn = container.spatialNavigationSearch('down');
     </code></pre>
 
-    <code>insideBtn</code> is assigned to the element whose {{Element/id}} matches with <code>'button1'</code>.
-    But <code>outsideBtn</code> is the element with {{Element/id}} <code>'button2'</code>.
+    <code>innerBtn</code> is assigned to the element whose {{Element/id}} matches with <code>'button1'</code>
+    because the {{SpatialNavigationSearchOptions/inside}} attribute is <code>true</code>.
+    But if the authors don't specify {{SpatialNavigationSearchOptions/inside}} attribute,
+    <code>false</code> is given to it by default. 
+    Therefore <code>outerBtn</code> is assigned to the element with {{Element/id}} <code>'button2'</code>
+    which is outside of <code>container</code>.
 </div>
 
 <div class=api>
@@ -1019,8 +1023,8 @@ To run the <dfn>spatial navigation steps</dfn> in <var>direction</var>, do the f
                 <span class=cssapi>* Else if the computed value of the 'spatial-navigation-action' property on <var>eventTarget</var> is not ''spatial-navigation-action/focus''
                  and <var>eventTarget</var> <a>can be manually scrolled</a>,
                  then <a>directionally scroll the element</a> <var>eventTarget</var> in <var>direction</var> and return.</span>
-            * Else, fallback to the next step.
-    * Else, fallback to the next step.
+            * Else, fall back to the next step.
+    * Else, fall back to the next step.
 5. Let <var>container</var> be the nearest ancestor of <var>eventTarget</var> that is a <a>spatial navigation container</a>.
 6. <i>Loop</i>: Let <var>candidates</var> be the result of <a>finding focusable areas</a>
     within <var>container</var>