Spent 7 hours on a CSS bug that was literally one missing letter

I was working on a simple landing page last night. Nothing fancy, just a header with some text next to an image. But the image kept overlapping the text no matter what I tried. I messed with margins, padding, display settings, even Googled the same thing like 15 times. After 7 whole hours of this, I finally saw it. I had typed 'flex-wrap: no-wrap' instead of 'flex-wrap: nowrap'. No hyphen needed. One hyphen was all it took to break my whole layout. Has anyone else spent way too long on a typo that felt too dumb to admit?

2 comments

2 Comments

evac7210h ago

7 hours is rough but honestly Ive done worse. I once spent an entire weekend debugging a React component that wouldnt render properly. Turned out I had class instead of className and the console just silently failed. Did you ever figure out why you didn't catch it sooner? Like was there a reason you kept assuming the problem was something more complicated? I find those are the bugs that get me the most because I convince myself its some deep logic issue when its really just me being clumsy with my keyboard.

aaron_wilson174h ago

Started doing a rubber duck debug session before assuming its something complex.