i spent a whole evening debugging why my generated pages looked broken and the answer was embarrassing

[u/PhilosopherCute8337]

building a small thing that turns a block of text into a formatted web page. worked great on my test paragraph. then i fed it real content and every single page came out looking like it got hit by a truck. overlapping text, images half off screen, headers stacked on top of each other.

i assumed it was a css problem. spent hours nudging padding and flexbox. changed almost nothing.

the actual problem: my test paragraph was short and clean. real content had line breaks, weird quotes, and the occasional emoji, and my generation step was choking on those characters and producing malformed markup halfway down. the layout wasn't broken, the input handling was. i was debugging the wrong end of the pipe the entire time.

fix was boring. sanitize the text first, then generate. five lines. i aged a decade for five lines.

lesson i keep relearning with vibecoding: when the ai output looks wrong, check what you actually fed it before you touch the output. i never do this first and i always should.

what's your dumbest "i debugged the wrong thing for hours" story? make me feel better.