You can build it with AI. You can fix it with AI too. Here is the proof.

story time...

I had a website that needed rebuilding. A compliance consultancy, niche audience, no dev budget to speak of.

So I built it with AI.

Claude Code, running in my terminal. Five pages, custom CSS, vanilla JavaScript, GitHub Pages, Google Analytics with proper consent gating. No framework, no build tool.

Two sessions. About six hours total across two days.

The build was fast. What followed was more instructive.

23 bugs.

Not all critical. Not all obvious. Some were visual. Some were compliance gaps. One required writing a Python script to process an image. Each one had a root cause worth understanding, not just a fix worth applying.

The standard story about AI coding tools is speed of creation. That story is true. But it is only half of it. The part that scares everyone is what happens after you ship. Let's dive into some bug fixes to understand what happened and how I fixed them and then we talk about the experience... Get straight to the last bit if you want the TL;DR

A few stories worth telling...

The Safari menu that showed one word

The hamburger menu worked perfectly on desktop. On Safari on iPhone, clicking it showed exactly one link floating in the middle of the screen. The other four had vanished.

Root cause: the nav bar had backdrop-filter: blur(20px) for a frosted glass effect. Per the CSS specification, any element with backdrop-filter creates a new containing block for position: fixed descendants. The menu panel was position: fixed; top: var(--nav-height); bottom: 0 but those coordinates were now measured against the 72px nav wrapper, not the viewport.

top: 72px to bottom: 0 of a 72px parent equals zero height. The panel existed in the DOM and rendered nothing. Only the first link had enough intrinsic line height to barely escape.

Fix:

.nav-wrap.nav-open { height: 100dvh; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .nav-wrap.nav-open .nav-links { position: absolute; top: var(--nav-height); bottom: 0; }

Switch from position: fixed to position: absolute. Absolute children are not subject to the backdrop-filter containing block rule. Clear the filter when the menu is open so the white overlay replaces it. Three declarations, one spec reference.

This is documented behaviour. It is completely invisible to anyone testing only on Chrome.

One button breaking the layout of every page

A horizontal scrollbar appeared on mobile. Every card on every page was clipped on the right edge. The hero paragraph was cut off mid word: "formulators ge...", "your Onl...".

The cause was a chain of four CSS behaviours interacting:

.btn has white-space: nowrap. A certain text field has a minimum content width of around 380px. That button sat inside .hero-content, which is a grid item inside .hero-inner. CSS Grid's default min-width: auto on grid items means a 1fr track cannot shrink below its items' minimum content size. The track resolved to roughly 380px on a 375px iPhone. That inflated .container. That inflated . That inflated the scroll width. Every section on every page inherited the overflow.

The visual symptom was cards and text being cut off. The actual cause was a single button in a completely different section of the page, two levels up in the layout hierarchy.

Fix:

html { overflow-x: clip; } .hero-inner > * { min-width: 0; } .hero-ctas .btn { width: 100%; justify-content: center; }

overflow-x: clip rather than overflow-x: hidden is deliberate. hidden establishes a new block formatting context and breaks position: sticky elements further down the page. clip does not. min-width: 0 on grid children is the standard defensive pattern that allows items to shrink below their content size. Making the buttons width: 100% means they expand to fill the available container rather than force the container wider.

Analytics running without consent

GA4 was implemented the standard way: a