diff --git a/src/components/Stepper/Stepper.stories.tsx b/src/components/Stepper/Stepper.stories.tsx
index 4fd7cf9f0..c29a4f447 100644
--- a/src/components/Stepper/Stepper.stories.tsx
+++ b/src/components/Stepper/Stepper.stories.tsx
@@ -63,5 +63,5 @@ SmallerStepperCount.args = {
     step: 1,
     stepData: noNavTestStepData,
     hasNavButtons: false,
-    headerWidth: 40,
+    headerWidth: '40',
 };
diff --git a/src/components/Stepper/Stepper.styles.ts b/src/components/Stepper/Stepper.styles.ts
index 220f76aa8..b647cb58e 100644
--- a/src/components/Stepper/Stepper.styles.ts
+++ b/src/components/Stepper/Stepper.styles.ts
@@ -123,6 +123,6 @@ export const DivStyledHelper = styled.div`
 `;
 
 export const HeaderStyled = styled.header<THeaderStyleProps>`
-    ${(p) => p.headerWidth && `width: ${p.headerWidth}%`};
-    align-self: 'center';
+    ${(p) => p.headerWidth && `max-width: ${p.headerWidth}px`};
+    width: 100%;
 `;
diff --git a/src/components/Stepper/Stepper.tsx b/src/components/Stepper/Stepper.tsx
index 0abea5237..442a4f233 100644
--- a/src/components/Stepper/Stepper.tsx
+++ b/src/components/Stepper/Stepper.tsx
@@ -26,7 +26,7 @@ const Stepper: React.FC<StepperProps> = ({
     completeTitle = 'all done, nice!',
     completeMessage = 'You should tell the user what to do next, or use the onComplete function to programmatically fire an event',
     onComplete = () => null,
-    headerWidth = 100,
+    headerWidth,
 }) => {
     const [activeStep, setActiveStep] = useState(step);
     const myStepRef = useRef(activeStep);
diff --git a/src/components/Stepper/types.ts b/src/components/Stepper/types.ts
index 2a5a220fd..f6deaa686 100644
--- a/src/components/Stepper/types.ts
+++ b/src/components/Stepper/types.ts
@@ -51,7 +51,7 @@ export interface StepperProps {
     /**
      * header width
      */
-    headerWidth?: number;
+    headerWidth?: string;
 }
 
 /**