Why Does My Layout Shift by 1px at Certain Screen Widths?

by

A layout shift by 1px in CSS usually happens when the browser is forced to round fractional pixels, handle scrollbar width, calculate flexible columns, or switch between responsive rules at certain screen widths.

Responsive CSS Fix

Why Does My Layout Shift by 1px at Certain Screen Widths?

A layout shift by 1px can be hard to notice, but easy to feel. A card looks slightly off. A header no longer lines up with the content. A full-width section creates a tiny horizontal jump. The layout is not completely broken, but it feels unstable. The cause is usually CSS sizing math: 100vw, scrollbars, subpixel rounding, padding, borders, Grid, Flexbox, or a breakpoint that changes too much at once.

Browse All Fixes Explore CSS Fixes
  • 1px layout shift
  • Responsive CSS bug
  • Visual debugging

What the bug looks like

A container, card, navigation, button group, image area, or header moves slightly when the screen width changes.

Why it happens

CSS often calculates fractional widths, but the screen still has to paint real pixels. That conversion can expose tiny alignment issues.

What fixes it

Use safer width rules, stabilize scrollbars, apply consistent box sizing, and make Grid or Flexbox layouts more forgiving.

The FrontFixer visual rule for this bug

A 1px layout shift is easier to understand when you compare the code with what actually happens on the page. So this fix uses the same pattern for every common cause: first the broken code, then the broken visual result, then the corrected code, then the corrected visual result.

Use this mental model when debugging: the browser is not moving things randomly. Something in your CSS is creating a slightly different measurement than you expected.

Error 1

Using 100vw when the page needs 100%

One of the most common causes of a tiny layout shift is using width:100vw on a section that should simply follow the normal page width. On desktop, 100vw can include the scrollbar area. That means the section may become slightly wider than the content area.

Broken code

100vw trap 
.hero { width: 100vw; margin-left: calc(50% - 50vw); padding: 64px 24px; } .container { max-width: 1120px; margin: 0 auto; }

Broken visual result

Section is too wide
Hero uses 100vw The section pushes slightly outside the normal page alignment.
The section looks almost correct, but it is wider than the content area.

Correct code

Safer width 
.hero { width: 100%; padding: 64px 24px; } .container { width: min(100% - 32px, 1120px); margin-inline: auto; }

Fixed visual result

Section is aligned
Hero uses normal flow The section now follows the same width system as the rest of the page.
The content edge and section edge now agree with each other.
Error 2

Forgetting box-sizing:border-box

Another common cause of small layout movement is the box model. If you give an element a width and then add padding and border, the final rendered size can become larger than expected. Sometimes the overflow is obvious. Other times it starts as a tiny visual mismatch.

Broken code

Width plus padding 
.card { width: 300px; padding: 24px; border: 1px solid #ddd; }

Broken visual result

Card becomes wider
Card width is not what you expected Padding and border are added on top of the declared width.
This can make one card appear slightly wider than the others.

Correct code

Stable box model 
*, *::before, *::after { box-sizing: border-box; } .card { width: 300px; padding: 24px; border: 1px solid #ddd; }

Fixed visual result

Card stays inside
Card size is predictable Padding and border are included inside the declared width.
The card now follows a more predictable sizing system.
Error 3

Letting Grid and Flexbox fight fractional pixels

Grid and Flexbox distribute available space. If the available width does not divide cleanly, the browser has to decide where the leftover pixel goes. That is why one column, tab, or button can sometimes look one pixel wider or slightly off.

Broken code

Tight grid math 
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; } .card { min-width: auto; }

Broken visual result

One column feels off
With tight spacing, fractional distribution becomes visually easier to notice.

Correct code

Safer grid 
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .grid > * { min-width: 0; }

Fixed visual result

Grid feels stable
The grid has more predictable tracks and children are allowed to shrink.
Error 4

Making breakpoints too jumpy

Sometimes the 1px shift is not really a rounding issue. It is a breakpoint issue. The layout changes at a specific width, and that change makes the page look like it jumped. This is common around widths like 1366px, 1280px, 1024px, or any custom breakpoint.

Broken code

Jumpy breakpoint 
.container { max-width: 1200px; padding-inline: 32px; } @media (max-width: 1366px) { .container { max-width: 1180px; padding-inline: 31px; } }

Broken visual result

Breakpoint jump
1367px
1366px
The layout changes too much right when the viewport crosses the breakpoint.

Correct code

Fluid container 
.container { width: min(100% - 32px, 1200px); margin-inline: auto; }

Fixed visual result

Smooth resizing
1367px
1366px
One clear formula creates a smoother transition between screen widths.
Error 5

Ignoring scrollbar appearance and disappearance

A layout can shift when the vertical scrollbar appears or disappears. This often happens when a modal opens, content loads, tabs switch, accordions expand, or a page changes from short to scrollable. The content area becomes slightly different, and centered elements can appear to move.

Broken code

No scrollbar stability 
html { overflow-y: auto; } .modal-open { overflow: hidden; }

Broken visual result

Scrollbar changes width
Centered content moved The available page width changed when the scrollbar appeared or disappeared.
The layout may jump even when your container CSS looks correct.

Correct code

Stable gutter 
html { scrollbar-gutter: stable; } /* Test browser support for your audience. */

Fixed visual result

Scrollbar space is reserved
Content stays stable The browser keeps space for the scrollbar, reducing horizontal jumps.
This can help when the shift happens because scrolling state changes.

Fast practical rule

If your layout shift is only 1px, do not patch it with margin-left:-1px or random transforms first. A tiny visual bug usually has a tiny math cause: 100vw, scrollbar width, fractional columns, box sizing, padding, borders, or a breakpoint that changes the layout too sharply.

How to debug the exact layout shift

Start by resizing the browser slowly. Watch the exact width where the layout shift appears. If it happens around a breakpoint, inspect the media query. If it happens when the page becomes scrollable, inspect scrollbar behavior. If it happens across many widths, look for fractional Grid, Flexbox, or percentage math.

Then inspect the element that moved. Check its computed width, margin, padding, border, transform, and parent container. The goal is to find which measurement changed by that tiny amount.

Temporary debug CSS

Debug only 
* { outline: 1px solid rgba(255, 0, 0, 0.15); } html, body { overflow-x: clip; }

Use outlines temporarily to see which element is wider or misaligned. Remove debug outlines before shipping the page.

Debug checklist

  • Check whether any section uses width:100vw when width:100% would be safer.
  • Check if the layout shifts when the vertical scrollbar appears or disappears.
  • Add box-sizing:border-box globally if the project does not already use it.
  • Inspect the exact viewport width where the 1px shift starts.
  • Look for media queries that change padding, gap, max width, or column count at that width.
  • Check if Grid columns use plain 1fr where minmax(0,1fr) would be safer.
  • Add min-width:0 to flex or grid children that contain long content.
  • Avoid fragile combinations of calc(), percentage widths, borders, and fixed gaps when the layout must align perfectly.
  • Test common desktop widths like 1366px, 1440px, and 1920px.
  • Do not hide the problem with random negative margins unless you have identified the real cause.
Best first move Replace unnecessary 100vw usage with 100% and retest.
Most common false fix Adding margin-left:-1px without understanding why the layout moved.
Most overlooked cause Scrollbar width changing the available content area.
Better mindset A 1px layout shift is usually a sizing-system problem, not a random browser attack.

Related fixes that can help

If your 1px layout shift is part of a wider responsive or overflow issue, these FrontFixer guides are the next places to check.

Fix container width problems If your page feels too wide, too narrow, or misaligned between sections. Read this fix
Fix overflow causing horizontal scroll If the 1px issue is actually a hidden overflow problem on mobile or desktop. Read this fix
Fix CSS Grid breaking on mobile If fractional columns, rigid tracks, or long content are making the grid unstable. Read this fix

Final takeaway

A layout shift by 1px at certain screen widths usually comes from CSS sizing math. The most common causes are 100vw, scrollbar width, subpixel rounding, fractional Grid or Flexbox distribution, padding, borders, and breakpoint rules that change too much at once.

Start with the simple checks: avoid unnecessary 100vw, use box-sizing:border-box, stabilize your container formula, inspect breakpoints, and reduce layout pressure inside Grid and Flexbox. Once the sizing system becomes predictable, the tiny 1px shift usually disappears.

Want more fixes like this?

Explore the full FrontFixer fixes library and keep debugging with practical guides built for real front-end layout problems.

Browse All Fixes Explore CSS Fixes
“`

Leave a Comment