diff --git a/components/page/__tests__/__snapshots__/child.test.tsx.snap b/components/page/__tests__/__snapshots__/child.test.tsx.snap
index efd93c7..e6788f6 100644
--- a/components/page/__tests__/__snapshots__/child.test.tsx.snap
+++ b/components/page/__tests__/__snapshots__/child.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`PageChild should work with child component 1`] = `
         }
       </style></main><footer class=\\"\\">Footer<style>
         footer {
-          width: 100%;
+          width: calc(100% - 16pt * 2);
           position: absolute;
           bottom: 0;
         }
diff --git a/components/page/page-footer.tsx b/components/page/page-footer.tsx
index b431fc1..6db482b 100644
--- a/components/page/page-footer.tsx
+++ b/components/page/page-footer.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import useTheme from '../styles/use-theme'
 import withDefaults from '../utils/with-defaults'
 
 interface Props {
@@ -13,12 +14,14 @@ type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type PageHeaderProps = Props & typeof defaultProps & NativeAttrs
 
 const PageFooter: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({ children, ...props }) => {
+  const theme = useTheme()
+
   return (
     <footer {...props}>
       {children}
       <style jsx>{`
         footer {
-          width: 100%;
+          width: calc(100% - ${theme.layout.gap} * 2);
           position: absolute;
           bottom: 0;
         }