Reduce the custom content width and center it. For #1860

web/components/ui/CustomPageContent/CustomPageContent.module.scss

@@ -1,12 +1,25 @@
+@import 'styles/mixins.scss';
+
+.pageContentContainer {
+  @include flexCenter;
+}
+
 .customPageContent {
   font-size: 16px;
   line-height: 1.5em;
   margin: 0;
   padding: 0;
+  width: 80%;
+  max-width: 1200px;
 
   color: var(--theme-text);
   background-color: var(--theme-background-secondary);
-  padding: 0.175em 1em;
+  padding: 1em;
+
+  // Allow the content to fill the width on narrow screens.
+  @media only screen and (max-width: 768px) {
+    width: 100%;
+  }
 
   hr {
     margin: 1.35em 0;

web/components/ui/CustomPageContent/CustomPageContent.tsx

@@ -7,5 +7,9 @@ interface Props {
 export default function CustomPageContent(props: Props) {
   const { content } = props;
   // eslint-disable-next-line react/no-danger
-  return <div className={s.customPageContent} dangerouslySetInnerHTML={{ __html: content }} />;
+  return (
+    <div className={s.pageContentContainer}>
+      <div className={s.customPageContent} dangerouslySetInnerHTML={{ __html: content }} />
+    </div>
+  );
 }