diff --git a/packages/freesewing.org/pages/index.js b/packages/freesewing.org/pages/index.js
index 14a625ec328..09aab842415 100644
--- a/packages/freesewing.org/pages/index.js
+++ b/packages/freesewing.org/pages/index.js
@@ -87,7 +87,7 @@ const HomePage = (props) => {
           </div>
         </section>
       <div>
-      <div className="max-w-xl m-auto my-32">
+      <div className="max-w-xl m-auto my-32 px-6">
         <Popout fixme>Create homepage</Popout>
       </div>
       <div className="max-w-7xl m-auto my-32">
diff --git a/packages/freesewing.shared/components/popout.js b/packages/freesewing.shared/components/popout.js
index 652d579c787..d590e6f968b 100644
--- a/packages/freesewing.shared/components/popout.js
+++ b/packages/freesewing.shared/components/popout.js
@@ -41,7 +41,7 @@ const Popout = (props) => {
 
   return props.compact
     ? (
-      <div className={`relative my-4 bg-${color} bg-opacity-5 ${className} -ml-8 -mr-8 sm:m-0`}>
+      <div className={`relative my-4 bg-${color} bg-opacity-5 ${className} -ml-6 -mr-6 sm:m-0`}>
         <div className={`
           border-y-4 sm:border-0 sm:border-l-4 px-4
           shadow text-base border-${color}
@@ -61,7 +61,7 @@ const Popout = (props) => {
       </div>
     )
     : (
-      <div className={`relative my-8 bg-${color} bg-opacity-5 ${className} -ml-8 -mr-8 sm:m-0`}>
+      <div className={`relative my-8 bg-${color} bg-opacity-5 ${className} -ml-6 -mr-6 sm:m-0`}>
         <div className={`
           border-y-4 sm:border-0 sm:border-l-4 px-6 sm:px-8 py-4 sm:py-2
           shadow text-base border-${color}