fix small layout bugs in app-settings-layout code example

Author: gwyneplaine

polaris.shopify.com/content/patterns/app-settings-layout/variants/default.md

@@ -46,19 +46,19 @@ This pattern uses the [`AlphaStack`](/components/layout-and-structure/alpha-stac
   ]}
 >
   <AlphaStack gap="16" align="center">
-    <Columns columns={{xs: '1fr', md: '2fr 5fr'}}>
+    <Columns columns={{xs: '1fr', md: '2fr 5fr'}} gap={{xs: '4', md: '0'}}>
       <Box
         as="section"
         paddingInlineStart={{xs: 4, sm: 0}}
-        paddingInlineEnd={{xs: 2, sm: 0}}
+        paddingInlineEnd={{xs: 4, sm: 0}}
       >
-        <AlphaStack align="start" gap="4">
+        <AlphaStack gap="4">
           <Text as="h3" variant="headingMd">
             InterJambs
           </Text>
-          <p>
+          <Text as="p" variant="bodyMd">
             Interjambs are the rounded protruding bits of your puzzlie piece
-          </p>
+          </Text>
         </AlphaStack>
       </Box>
       <AlphaCard roundedAbove="sm">
@@ -68,19 +68,19 @@ This pattern uses the [`AlphaStack`](/components/layout-and-structure/alpha-stac
         </AlphaStack>
       </AlphaCard>
     </Columns>
-    <Columns columns={{xs: '1fr', md: '2fr 5fr'}}>
+    <Columns columns={{xs: '1fr', md: '2fr 5fr'}} gap={{xs: '4', md: '0'}}>
       <Box
         as="section"
-        paddingInlineStart={{xs: 2, sm: 0}}
-        paddingInlineEnd={{xs: 2, sm: 0}}
+        paddingInlineStart={{xs: 4, sm: 0}}
+        paddingInlineEnd={{xs: 4, sm: 0}}
       >
-        <AlphaStack align="start" gap="4">
+        <AlphaStack gap="4">
           <Text as="h3" variant="headingMd">
             Dimensions
           </Text>
-          <p>
+          <Text as="p" variant="bodyMd">
             Interjambs are the rounded protruding bits of your puzzlie piece
-          </p>
+          </Text>
         </AlphaStack>
       </Box>
       <AlphaCard roundedAbove="sm">