My AI Agent Spent an Hour Debugging Its Own Two Lines

What I was told

A full-width section on my site was rendering with a strip of background showing on one edge. My agent investigated and, over about an hour, attributed the problem to four different things in sequence:

My video hero component
z-index, raised the section from z-10 to z-[60]
Stacking context, added isolate, with a comment asserting it was necessary
max-w-3xl, claimed Tailwind's 768px was responsible for the break observed at 766px

It ran hit-tests, parent-chain walks, and breakpoint sweeps across ten viewport widths, producing a measurement table.

What was actually true

The cause was two lines it had added itself, unasked, at the start:

.seo-band {
  width: 100vw;
  margin-left: 50%;             /* ← added, unrequested */
  transform: translateX(-50%);  /* ← added, unrequested */
}

These two properties resolve against different reference boxes:

margin-left: 50% resolves against the parent's width
translateX(-50%) resolves against the element's own width, here 100vw

Net horizontal offset:

offset = (0.5 × parentWidth) − (0.5 × viewportWidth)

Zero only when the parent equals the viewport. Any width-capped ancestor makes it negative, shifting the band left by half the difference.

Its own measurement table is the signature of that formula and nothing else:

Viewport	x offset	What it means
430px	0	parent was full width
660–766px	−10 to −63	parent capped
780–973px	0	parent full width
1000px	−13	parent ≈ 974

Every failing row is a width where an ancestor capped the parent. Every passing row is one where it didn't. There was never a second variable.

I found it by opening devtools and unchecking the two properties. Correct at every width, immediately.

The theory that should worry you most

The max-w-3xl hypothesis. Tailwind's max-w-3xl is 768px. The break appeared around 766px. Therefore max-w-3xl was the cause.

That is not diagnosis. It is pattern-matching on two similar numbers, which is exactly what a language model is built to do and exactly what you must not accept as a causal claim. I removed max-w-3xl in the browser. The strip stayed. The theory was numerically seductive and completely wrong.

The residue

Also left behind: isolate, z-[60], and comments justifying both. Neither was ever shown to affect anything; they were added while chasing theories that turned out to be wrong. Defensive CSS left over from a bad diagnosis is worse than no CSS, because the next person to read it, including me in three months, assumes it is load-bearing.

The lesson

Read your own diff before you theorize about someone else's code. A git diff of uncommitted changes would have surfaced this in under ten seconds. The agent ran ten-viewport measurement sweeps instead, sophisticated work, aimed away from the answer.

The ordering is: your diff, then a test, then other people's code. It got inverted, and an hour went into a two-line self-inflicted bug.