diff --git a/web/css/dottes.css b/web/css/dottes.css
index cb8fb1d..0e661a7 100644
--- a/web/css/dottes.css
+++ b/web/css/dottes.css
@@ -95,21 +95,31 @@ div.dottes-container
     margin: 10px;
 }
 
-div.dottes-container h1
-{
-    padding: 0px;
-}
-
 div.dottes-transpose-instrument
 {
+    display: table;
+    width: 100%;
 }
 
-div.dottes-transpose-how
+div.dottes-transpose-instrument-item
 {
+    display: table-cell;
+    vertical-align: middle;
 }
 
-div.dottes-transpose-tunes
+div.dottes-transpose-instrument-name
 {
+    width: 15%;
+}
+
+div.dottes-transpose-instrument-how
+{
+    width: 55%;
+}
+
+div.dottes-transpose-tune-types
+{
+    width: 30%;
 }
 
 a.dottes-tune-link
@@ -132,11 +142,12 @@ table.dottes-tune-table td
 ul.tune-type-list
 {
     list-style-type: none;
+    margin: 0;
 }
 
 ul.tune-type-list li
 {
-    display: inline;
+    display: inline-block;
 }
 
 img.dottes-png
diff --git a/web/index.html b/web/index.html
index ddd7ff4..f2faeb2 100644
--- a/web/index.html
+++ b/web/index.html
@@ -34,18 +34,20 @@
       <p>The tunes we play tend to vary over time. So this collection is
         not static, but will change over time. I'll probably not delete tunes,
         but at some stage may get round to marking some as less used.</p>
-      <div class="grid_11 dottes-container">
-        <div class="grid_2 alpha">
-          <h1>Tunes</h1>
-        </div>
-        <div class="grid_5">
-          <p>The tunes are separated into tune collections.
-        </div>
-        <div class="grid_4 omega">
-          <ul class="tune-type-list">
-            <li><a href="Morris">Morris</a></li>
-            <li><a href="Session">Session</a></li>
-          </ul>
+      <div class="dottes-container">
+        <div class="dottes-transpose-instrument">
+          <div class="dottes-transpose-instrument-item dottes-transpose-instrument-name">
+            <h1>Tunes</h1>
+          </div>
+          <div class="dottes-transpose-instrument-item dottes-transpose-how">
+            <p>The tunes are separated into tune collections.
+          </div>
+          <div class="dottes-transpose-instrument-item dottes-transpose-tune-types">
+            <ul class="tune-type-list">
+              <li><a href="Morris">Morris</a></li>
+              <li><a href="Session">Session</a></li>
+            </ul>
+          </div>
         </div>
       </div>
     </div>
@@ -62,19 +64,21 @@
         simple method.
       <p>I hope you find them useful.
 
-        <div class="grid_11 dottes-container">
-          <div class="grid_2 alpha dottes-transpose-instrument">
-            <h1>Cello</h1>
-          </div>
-          <div class="grid_5 dottes-transpose-how">
-            <p>Transpose down one or two octaves depending on the range in the
-              tune, and use the bass clef.
-          </div>
-          <div class="grid_4 omega dottes-transpose-tunes">
-            <ul class="tune-type-list">
-              <li><a href="Morris-Cello">Morris</a></li>
-              <li><a href="Session-Cello">Session</a></li>
-            </ul>
+        <div class="dottes-container">
+          <div class="dottes-transpose-instrument">
+            <div class="dottes-transpose-instrument-item dottes-transpose-instrument-name">
+              <h1>Cello</h1>
+            </div>
+            <div class="dottes-transpose-instrument-item dottes-transpose-how">
+              <p>Transpose down one or two octaves depending on the range in the
+                tune, and use the bass clef.
+            </div>
+            <div class="dottes-transpose-instrument-item dottes-transpose-tune-types">
+              <ul class="tune-type-list">
+                <li><a href="Morris-Cello">Morris</a></li>
+                <li><a href="Session-Cello">Session</a></li>
+              </ul>
+            </div>
           </div>
         </div>
     </div>