width 100%

Why Does width:100% Overflow After Padding?

by

Width 100% padding overflow happens when an element is set to width:100% and padding or borders are added outside that width. The fix is usually box-sizing:border-box, safer component sizing, and checking nested elements that still use the old content-box model.

Box Model Overflow Fix

Why does width:100% overflow after padding?

A width:100% element can still overflow its parent when padding is calculated outside the declared width. That surprises many developers because 100% sounds safe. In the default CSS box model, however, width means the content box. Padding and border can be added after that width, making the final rendered box wider than the container.

CSS Fixes Responsive Fixes
  • Box model
  • width:100%
  • Padding overflow
  • border-box

What the bug looks like

A card, input, banner, button, or inner box looks slightly wider than its parent and may create horizontal scroll.

Why it happens

The browser calculates the content width first, then adds padding and border outside that width.

What usually fixes it

Use box-sizing:border-box, keep full-width children shrinkable, and avoid resetting box sizing inside components.

Test the box model fast

Temporarily toggle box-sizing:border-box on the leaking element in DevTools. If the overflow disappears, the problem is not mysterious responsive behavior. It is width math.

Related: Try this in the FrontFixer Live Inspector.

Open Live Inspector
Error 1

A full-width card adds padding outside its width

This is the classic width 100% padding overflow bug. The card fills the available row, then padding is added on the left and right. If the element is using the default content-box model, the final physical box becomes wider than the parent.

Broken code

Content-box overflow 
.card {
  width: 100%;
  padding: 24px;
  border: 1px solid #ddd;
}

Broken visual result

Padding adds extra width
overflow
Content card

The card is 100%, then padding makes the final box wider.

The content width fills the parent, but the padding still needs extra space.

Correct code

Padding included 
.card {
  width: 100%;
  padding: 24px;
  border: 1px solid #ddd;
  box-sizing: border-box;
}

Fixed visual result

Box fits parent
fits
Content card

The padding is included inside the same final width.

box-sizing:border-box makes the declared width include content, padding, and border.
Error 2

A full-width input adds padding on top of 100%

Forms are a common place to see this bug. An input is set to width:100%, but it also has comfortable horizontal padding. Without border-box sizing, the field becomes wider than the form card.

Broken code

Input pushes form 
.search-input {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid #d1d5db;
}

Broken visual result

Input escapes card
field leak
Search form

The input looks full width, but its padding makes it too wide.

The form itself may be fine. The full-width field is the leaking child.

Correct code

Form-safe input 
.search-input {
  width: 100%;
  max-width: 100%;
  padding: 14px 18px;
  border: 1px solid #d1d5db;
  box-sizing: border-box;
}

Fixed visual result

Input stays inside
safe field
Search form

The field can keep its padding without forcing overflow.

Full-width form controls should include padding and border inside the width.
Error 3

A grid child is full width but has internal spacing

Grid layouts can be correct while the child components inside the grid are not. A card inside a grid column can use width:100% and padding, then overflow its own column. The grid gets blamed, but the component box model is the real issue.

Broken code

Grid child overflow 
.grid-card {
  width: 100%;
  padding: 20px;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

Broken visual result

Child leaks column
grid leak
Two-column grid

Each child tries to be full width, then adds padding outside.

Card A
Card B
The grid columns are not the only width math. Component padding matters too.

Correct code

Grid-safe cards 
.grid-card {
  width: 100%;
  min-width: 0;
  padding: 20px;
  box-sizing: border-box;
}

.grid > * {
  min-width: 0;
}

Fixed visual result

Cards fit columns
grid safe
Two-column grid

The child cards now respect the available column width.

Card A
Card B
A grid fix often needs both box-sizing:border-box and shrink-safe grid children.
Error 4

A nested component resets box-sizing

The most frustrating version happens when your global CSS already uses border-box, but a component, embed, plugin, or copied snippet resets part of the layout back to content-box. The parent behaves correctly, while one nested child quietly overflows.

Broken code

Reset inside component 
.widget * {
  box-sizing: content-box;
}

.widget-panel {
  width: 100%;
  padding: 24px;
}

Broken visual result

Nested box leaks
reset
Embedded widget

A nested rule changes how the child calculates width.

Panel overflow
The global layout can be safe while one component uses unsafe sizing internally.

Correct code

Inherited border-box 
.widget,
.widget *,
.widget *::before,
.widget *::after {
  box-sizing: border-box;
}

.widget-panel {
  width: 100%;
  padding: 24px;
}

Fixed visual result

Nested box fits
safe reset
Embedded widget

The component keeps its internal spacing without escaping.

Panel fits
Component-level border-box rules prevent isolated widgets from breaking the page width.
Premium pattern

A production-minded box sizing pattern

A reliable layout system does not wait for padding bugs to appear. It sets a safe global box model, protects component boundaries, keeps media and form controls inside their parents, and avoids using overflow-x:hidden as the first response.

Premium code

Safe box model system 
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.card,
.input,
.button,
.media,
.widget-panel {
  width: 100%;
  max-width: 100%;
}

.card,
.widget-panel {
  padding: clamp(16px, 3vw, 28px);
}

.grid > *,
.flex > * {
  min-width: 0;
}

Premium visual result

Padding included, no overflow
premium
Safe component system

Every full-width component includes its own spacing inside the final box.

Card padding Input padding Grid children
Premium box model CSS makes padding predictable instead of letting it surprise the layout.

Fast practical rule

If width:100% overflows after padding, do not assume 100% is broken. The width may be correct, but the box model may be adding padding and border outside that width. Add box-sizing:border-box, then check nested elements that may still be using content-box.

Debug checklist

  • Inspect the leaking element and check its computed box model in DevTools.
  • Look for width:100% combined with padding or borders.
  • Temporarily add box-sizing:border-box to the element and test again.
  • Check inputs, buttons, cards, banners, widgets, and grid children first.
  • Search for component CSS that resets box-sizing to content-box.
  • Add max-width:100% to full-width children that may receive padding.
  • Use min-width:0 on flex and grid children that contain padded content.
  • Do not hide the symptom with overflow-x:hidden until you find the leaking box.
Best first move Toggle box-sizing:border-box in DevTools and watch whether the overflow disappears.
Most common cause A full-width card or form field adds horizontal padding outside the content box.
Most sneaky cause A third-party component resets box sizing inside a safe page layout.
Better mindset width:100% is not the final rendered width unless the box model includes spacing.

Why border-box fixes the symptom

The reason box-sizing:border-box works is that it changes what the browser treats as the final box. With the default content-box model, the declared width describes only the content area. Padding and border are added after that. With border-box, the declared width describes the complete visual box, including content, padding, and border.

That difference matters most when the element is already trying to fill all available space. A narrow card, sidebar, form row, checkout panel, mobile container, or grid column has very little extra room. If the child says width:100% and then adds horizontal padding outside that width, the parent has no space left to absorb the mistake. The browser does what it is told and expands the scrollable area.

This is why the bug often feels random. On a wide desktop screen, the extra 32 or 48 pixels may not be obvious. On a phone, the same extra pixels can create a visible right-side leak. The layout did not suddenly become worse on mobile; the smaller viewport simply exposed the math.

Content-box question “How wide is the content before padding?”
Border-box question “How wide is the whole element after padding?”
Real layout question “Does the final rendered box fit the parent?”

When box-sizing is not the only fix

Sometimes adding box-sizing:border-box fixes the padded box but does not remove every overflow source. That usually means there are two bugs at the same time. A form input may need border-box, while the form row also needs min-width:0. A grid card may need border-box, while the grid itself needs responsive columns. A button may need border-box, while the text inside it also needs wrapping.

Debug this in layers. First fix the element that has padding outside its width. Then check the parent layout. Finally check the content inside the element. If the box is safe but the text, image, icon, or nested child still refuses to shrink, the box model was only the first part of the problem.

Related fixes that can help

Width and padding overflow often connects to horizontal scroll, container width, form fields, mobile layout, and viewport-width bugs.

Horizontal scroll on mobile? If the padded element creates a sideways scrollbar on phones. Read this fix
Why is my page wider than the screen? If the whole page becomes wider because of one leaking element. Read this fix
Fix container width problems If parent wrappers, max-width rules, or layout containers are involved. Read this fix
Why is my form input wider than its container? If the box model bug is happening mainly inside form fields. Read this fix
100vw causes horizontal scroll If the width bug involves viewport units instead of parent width. Read this fix
Why is my button wider than the screen on mobile? If the padded full-width element is a button or CTA. Read this fix

Final takeaway

Width 100% padding overflow is a box model problem. The element may be correctly set to fill its parent, but the browser can still add padding and borders outside the declared content width. That makes the final rendered box wider than the container.

Use box-sizing:border-box as your default, check full-width form controls and nested components, and keep flex or grid children shrink-safe. When spacing is included in the final width, width:100% becomes predictable again.

Want more fixes like this?

Browse more CSS box model, overflow, and responsive debugging guides in the FrontFixer library.

CSS Fixes All Fixes