fix(UI): fix faq section misaligned on homepage freeCodeCamp#54726 (freeCodeCamp#55891)

Author: dilankayasuru

client/src/components/landing/components/faq.tsx

@@ -15,7 +15,14 @@ const Faq = (): JSX.Element => {
   const faqItems = t<string, string & FaqItem[]>('landing.faqs');
 
   return (
-    <Col sm={8} smOffset={2} xs={10} xsOffset={1}>
+    <Col
+      md={8}
+      mdOffset={2}
+      sm={10}
+      smOffset={1}
+      xs={12}
+      className='faq-section'
+    >
       <h2 className='big-heading'>{t('landing.faq')}</h2>
       <Spacer size='small' />
       {faqItems.map((faq, i) => (

client/src/components/landing/landing.css

@@ -181,7 +181,8 @@ figcaption.caption {
   padding: 4vw 15px;
 }
 
-.certification-section {
+.certification-section,
+.faq-section {
   padding-inline: 4vw;
 }