Fix the FAQ section width jumping around on different viewport widths

src/components/landing/donate.astro

@@ -1,28 +1,24 @@
-<section class="donate">
-  <div class="container">
-    <div
-      class="relative z-10 -top-4 text-[#fff] bg-[url('/assets/img/blurp.webp')] bg-center bg-cover mb-12 flex justify-center"
-    >
-      <div class="p-6 md:p-8 lg:px-16 lg:py-10">
-        <h2 class="text-3xl lg:text-4xl mb-[0.8em] lg:mb-[0.4em]">
-          Become a <span>Ladybird</span> supporter
-        </h2>
-        <p class="mb-5 max-w-2xl">
-          Ladybird is funded entirely by sponsorships and donations from people
-          and companies who care about the open web.
-          <p class="mb-5 max-w-2xl">
-            We accept one-time and recurring monthly donations via <a
-              href="https://donorbox.org/ladybird">Donorbox</a
-            >.
-            <p class="mb-5 max-w-2xl">
-              If you or your company would like to make a large donation, we
-              would be happy to display your logo on this website! Please <a
-                href="mailto:[email protected]">contact us</a
-              > about becoming a sponsor.
-            </p>
-          </p>
-        </p>
-      </div>
-    </div>
+<section
+  class="relative z-10 -top-4 text-[#fff] bg-[url('/assets/img/blurp.webp')] bg-center bg-cover mb-12 flex justify-center"
+>
+  <div class="p-6 md:p-8 lg:px-16 lg:py-10">
+    <h2 class="text-3xl lg:text-4xl mb-[0.8em] lg:mb-[0.4em]">
+      Become a <span>Ladybird</span> supporter
+    </h2>
+    <p class="mb-5 max-w-2xl">
+      Ladybird is funded entirely by sponsorships and donations from people and
+      companies who care about the open web.
+    </p>
+    <p class="mb-5 max-w-2xl">
+      We accept one-time and recurring monthly donations via <a
+        href="https://donorbox.org/ladybird">Donorbox</a
+      >.
+    </p>
+    <p class="mb-5 max-w-2xl">
+      If you or your company would like to make a large donation, we would be
+      happy to display your logo on this website! Please <a
+        href="mailto:[email protected]">contact us</a
+      > about becoming a sponsor.
+    </p>
   </div>
 </section>

src/components/landing/faq.astro

@@ -1,4 +1,4 @@
-<section id="faq" class="faq xl:mx-32 md:mx-16">
+<section id="faq" class="faq">
   <div class="container">
     <div class="faq__tf">
       <h2>Frequently Asked Questions</h2>

src/styles/global.css

@@ -789,22 +789,18 @@ table.sponsor-tiers td:first-child {
   font-weight: bold;
 }
 
-.donate .container {
-  max-width: none;
-}
-
 div.newsletter-image-caption {
-    text-align: center;
-    font-size: 0.6em;
-    margin-top: -3em;
-    margin-bottom: 3em;
+  text-align: center;
+  font-size: 0.6em;
+  margin-top: -3em;
+  margin-bottom: 3em;
 }
 
 div.newsletter-image-caption a {
-    font-size: inherit;
-    letter-spacing: inherit;
+  font-size: inherit;
+  letter-spacing: inherit;
 }
 
 th {
-    font-weight: 600;
+  font-weight: 600;
 }