give help page some layout

help.html

@@ -5,27 +5,33 @@
 <section class="help main-content">
   <h1>Help</h1>
 
-  <p> If you need help:
+  <section class="self-help">
+    <h2>Self-help</h2>
+
     <ul>
-      <li> Ask on the <a href="/discussion">discussion forums</a>
-      <li> Ask in the IRC channel (irc.mitx.mit.edu, channel #6002)]
-      <li> Check the <a href="/info">course handouts.</a>
+      <li>Ask on the <a href="/discussion">discussion forums</a></li>
+      <li>Ask in the IRC channel (irc.mitx.mit.edu, channel #6002)]</li>
+      <li>Check the <a href="/info">course handouts.</a></li>
     </ul>
+  </section>
 
-  <p> If you can't solve your problems with self-help, we have several
-  e-mail addresses set up:</p>
+    <section class="help-email">
+      <h2>Help email</h2>
+      <p> If you can't solve your problems with self-help, we have several
+        e-mail addresses set up:</p>
 
-  <dl>
-    <dt> technical@mitx.mit.edu</dt>
-    <dd> System-related questions</dd>
-    <dt> content@mitx.mit.edu</dt>
-    <dd> Content-related questions</dd>
-    <dt> bugs@mitx.mit.edu</dt>
-    <dd> Bug reports</dd>
-    <dt> suggestions@mitx.mit.edu</dt>
-    <dd> Suggestions</dd>
-  </dl>
+      <dl>
+        <dt>System-related questions</dt>
+        <dd><a href="mailto:technical@mitx.mit.edu">technical@mitx.mit.edu</a></dd>
+        <dt>Content-related questions</dt>
+        <dd><a href="mailto:content@mitx.mit.edu">content@mitx.mit.edu</a></dd>
+        <dt>Bug reports</dt>
+        <dd><a href="mailto:bugs@mitx.mit.edu">bugs@mitx.mit.edu</a></dd>
+        <dt>Suggestions</dt>
+        <dd><a href="mailto:suggestions@mitx.mit.edu">suggestions@mitx.mit.edu</a></dd>
+      </dl>
 
-  <p> Please bear in mind that while we read them, we do not expect to
-  have time to respond to all e-mails.</p>
+      <p> Please bear in mind that while we read them, we do not expect to
+        have time to respond to all e-mails.</p>
+    </section>
 </section>

sass/_help.scss

 section.help.main-content {
   padding: lh();
 
+  h1 {
+    margin-top: 0;
+    margin-bottom: lh();
+    padding-bottom: lh();
+    border-bottom: 1px solid #ddd;
+  }
+
   p {
     max-width: 700px;
   }
 
-  dl {
+  h2 {
+    margin-top: 0;
+  }
+
+  section.self-help {
     margin-bottom: lh();
+    margin-right: flex-gutter();
+    float: left;
+    width: flex-grid(6);
 
-    dd, dt {
-      margin-bottom: lh(.5);
+    ul {
+      margin-left: flex-gutter(6);
+
+      li {
+        margin-bottom: lh(.5);
+      }
     }
+  }
+
+  section.help-email {
+    float: left;
+    width: flex-grid(6);
+
+    dl {
+      margin-bottom: lh();
+      display: block;
+
+      dd {
+        margin-bottom: lh();
+      }
 
-    dt {
-      font-weight: bold;
+      dt {
+        font-weight: bold;
+        float: left;
+        clear: left;
+        width: flex-grid(2, 6);
+      }
     }
   }
 }

sass/_layout.scss

@@ -60,12 +60,14 @@ html {
             float: none;
 
             h1 {
-              float: left;
+              float: right;
               border: 0;
+              margin-right: 0;
+              padding-right: 0;
             }
 
             h2 {
-              float: right;
+              float: left;
               border: 0;
               margin-right: 0;
               padding-right: 0;