diff --git a/packages/ui/src/components/Header/Header.stories.tsx b/packages/ui/src/components/Header/Header.stories.tsx
index 77994ab4d9..59e5cf254d 100644
--- a/packages/ui/src/components/Header/Header.stories.tsx
+++ b/packages/ui/src/components/Header/Header.stories.tsx
@@ -28,6 +28,9 @@ import { RiMore2Line } from '@remixicon/react';
 const meta = preview.meta({
   title: 'Backstage UI/Header',
   component: Header,
+  parameters: {
+    layout: 'fullscreen',
+  },
 });
 
 const tabs: HeaderNavTabItem[] = [
diff --git a/packages/ui/src/components/Header/Header.tsx b/packages/ui/src/components/Header/Header.tsx
index 67be3eb6bd..f70423fdd6 100644
--- a/packages/ui/src/components/Header/Header.tsx
+++ b/packages/ui/src/components/Header/Header.tsx
@@ -20,6 +20,7 @@ import { RiArrowRightSLine } from '@remixicon/react';
 import { HeaderNav } from './HeaderNav';
 import { useDefinition } from '../../hooks/useDefinition';
 import { HeaderDefinition } from './definition';
+import { Container } from '../Container';
 import { Link } from '../Link';
 import { Fragment } from 'react/jsx-runtime';
 
@@ -87,7 +88,7 @@ export const Header = (props: HeaderProps) => {
   } = ownProps;
 
   return (
-    <div className={classes.root}>
+    <Container className={classes.root}>
       {tags && tags.length > 0 && (
         <div className={classes.tags}>
           {tags.map((tag, i) => (
@@ -166,7 +167,7 @@ export const Header = (props: HeaderProps) => {
           <HeaderNav tabs={tabs} activeTabId={activeTabId} />
         </div>
       )}
-    </div>
+    </Container>
   );
 };