Fix alignment of FAQ page

Author: Krystle Salazar

legal_db/static/styles.scss

@@ -139,7 +139,8 @@ a, a:hover {
   color: $color-light-gray;
 }
 
-.detail { // Detail page section
+.details, // Detail page section
+.faqs {
   padding-top: $space-xl;
   padding-bottom: $space-large;
 }
@@ -154,7 +155,7 @@ a, a:hover {
   padding-bottom: $space-bigger;
 }
 
-.explore, .contribute, .detail {
+.explore, .contribute, .details, .faqs {
   .container {
     padding-left: $space-bigger;
     padding-right: $space-bigger;

legal_db/templates/legal_db/case/detail.html

@@ -7,7 +7,7 @@
     <h2 class="hero-title b-header">{{ case.name }}</h2>
   </div>
 </section>
-<section class="detail">
+<section class="details">
   <div class="container">
     <div class="columns">
       <aside class="column is-one-third">

legal_db/templates/legal_db/faq.html

@@ -8,33 +8,35 @@
     <h1 class="hero-title title is-2">Frequently Asked Questions</h1>
   </div>
 </div>
-<div class="margin-horizontal-xxl margin-vertical-larger">
-  <div class="columns">
-    <section class="column is-9">
-    <div class="control has-icons-left">
-      <label for="search" class="is-sr-only">Search: </label>
-      <input id="search" class="input search" type="text" onkeyup="search()" placeholder="Search for..." />
-      <span class="icon is-left"><i class="icon search"></i></span>
-    </div>
-      <div class="padding-right-normal padding-top-big">
-        {% for faq in faqs %}
-        <article class="faq__content">
-          <div id="faq-head-{{ forloop.counter }}" class="faq__head" aria-expanded="false">
-            <h5 class="faq__title">{{ faq.question }}</h5>
-          </div>
-          <div id="faq-body-{{ forloop.counter }}" class="faq__body is-hidden" aria-hidden="false">
-            {{ faq.answer | markdown | safe }}
-          </div>
-        </article>
-        {% endfor %}
+<section class="faqs">
+  <div class="container">
+    <div class="columns">
+      <div class="column is-9">
+        <div class="control has-icons-left">
+          <label for="search" class="is-sr-only">Search:</label>
+          <input id="search" class="input column is-8 margin-bottom-big" type="text" onkeyup="search()" placeholder="Search for..." />
+          <span class="icon is-left"><i class="icon search"></i></span>
+        </div>
+        <div>
+          {% for faq in faqs %}
+          <article class="faq__content">
+            <div id="faq-head-{{ forloop.counter }}" class="faq__head" aria-expanded="false">
+              <h5 class="faq__title">{{ faq.question }}</h5>
+            </div>
+            <div id="faq-body-{{ forloop.counter }}" class="faq__body is-hidden" aria-hidden="false">
+              {{ faq.answer | markdown | safe }}
+            </div>
+          </article>
+          {% endfor %}
+        </div>
       </div>
-    </section>
-    <aside class="column is-3">
-      <h4>Still have questions?</h4>
-      <b><a href="mailto:legal@creativecommons.org" class="has-text-dark-slate-blue">Contact us</a></b>
-    </aside>
+      <aside class="column is-3">
+        <h4>Still have questions?</h4>
+        <b><a href="mailto:legal@creativecommons.org" class="has-text-dark-slate-blue">Contact us</a></b>
+      </aside>
+    </div>
   </div>
-</div>
+</section>
 {% endblock %}
 
 {% block js_content %}

legal_db/templates/legal_db/scholarship/detail.html

@@ -7,7 +7,7 @@
     <h2 class="hero-title b-header">{{ scholarship.title }}</h2>
   </div>
 </div>
-<div class="detail">
+<div class="details">
   <div class="container">
     <div class="columns">
       <aside class="column is-one-third">