fix(UI): Button alignment in email signup (#52132)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>

client/src/pages/email-sign-up.css

@@ -3,6 +3,15 @@
   font-size: 1rem;
 }
 
+/*
+This is a temporary fix until the component library is revisited.
+See https://github.com/freeCodeCamp/freeCodeCamp/issues/52131#issuecomment-1788840851.
+*/
+.email-list-opt {
+  display: flex;
+  flex-wrap: wrap;
+}
+
 @media (min-width: 500px) {
   .email-sign-up strong,
   .email-sign-up p {

client/src/pages/email-sign-up.tsx

@@ -61,32 +61,34 @@ function EmailListOptIn({
   const { t } = useTranslation();
   if (isSignedIn) {
     return (
-      <Row>
-        <Col md={4} mdOffset={2} sm={5} smOffset={1} xs={12}>
-          <Button
-            block={true}
-            bsSize='lg'
-            bsStyle='primary'
-            className='big-cta-btn'
-            onClick={() => acceptTerms(true)}
-          >
-            {t('buttons.yes-please')}
-          </Button>
-          <Spacer size='small' />
-        </Col>
-        <Col md={4} sm={5} xs={12}>
-          <Button
-            block={true}
-            bsSize='lg'
-            bsStyle='primary'
-            className='big-cta-btn'
-            onClick={() => acceptTerms(false)}
-          >
-            {t('buttons.no-thanks')}
-          </Button>
-          <Spacer size='small' />
-        </Col>
-      </Row>
+      <Container>
+        <Row className='email-list-opt'>
+          <Col md={4} mdOffset={2} sm={5} smOffset={1} xs={12}>
+            <Button
+              block={true}
+              bsSize='lg'
+              bsStyle='primary'
+              className='big-cta-btn'
+              onClick={() => acceptTerms(true)}
+            >
+              {t('buttons.yes-please')}
+            </Button>
+            <Spacer size='small' />
+          </Col>
+          <Col md={4} sm={5} xs={12}>
+            <Button
+              block={true}
+              bsSize='lg'
+              bsStyle='primary'
+              className='big-cta-btn'
+              onClick={() => acceptTerms(false)}
+            >
+              {t('buttons.no-thanks')}
+            </Button>
+            <Spacer size='small' />
+          </Col>
+        </Row>
+      </Container>
     );
   } else {
     return (