diff --git a/_sass/code.scss b/_sass/code.scss
index 384ef97f68002ba7810355751161eebcd059d43b..1ac7adc7d9ce541fcd3500abcfbba146abcbd964 100644
--- a/_sass/code.scss
+++ b/_sass/code.scss
@@ -106,6 +106,7 @@ figure.highlight {
   }
 
   td.gl {
+    width: 1em;
     padding-right: $sp-3;
   }
 
diff --git a/docs/ui-components/line-nos.md b/docs/ui-components/line-nos.md
index 1baa3da91822d27e1001f9383074be8888ffe99e..62870c12920ea53b1232f1be3143a5ef023cea9a 100644
--- a/docs/ui-components/line-nos.md
+++ b/docs/ui-components/line-nos.md
@@ -103,13 +103,24 @@ end
 {% include fix_linenos.html code=code %}
 {% assign code = nil %}
 
-❌ With the default configuration options, the following example illustrates
+Narrow code stays close to the line numbers:
+
+{% capture code %}
+{% highlight ruby linenos %}
+def foo
+  puts 'foo'
+end
+{% endhighlight %}
+{% endcapture %}
+{% include fix_linenos.html code=code %}
+{% assign code = nil %}
+
+❌ With the compression options used for the theme docs, the following example illustrates
 the **incorrect** formatting arising from the incompatibility of HTML compression
 and the non-conforming HTML produced by Jekyll for line numbers:
 
 {% highlight ruby linenos %}
-# Ruby code with syntax highlighting and unfixed line numbers using Liquid
-GitHubPages::Dependencies.gems.each do |gem, version|
-  s.add_dependency(gem, "= #{version}")
+def foo
+  puts 'foo'
 end
 {% endhighlight %}