This was my first project — a small QR code card, built from a Frontend Mentor challenge. Nothing complicated: a white card centered on a colored background, with an image and two lines of text stacked inside it. I thought I was done.
Then I resized the browser to a smaller width, and the card started leaning to one side.
That was confusing on its own, because nothing in my CSS should have cared about screen width in a way that would push the card sideways. I hadn't written anything asymmetric. So the first question wasn't "how do I fix this" — it was "what is even causing this."
I reached for the debugging trick I'd read about: outline everything.
* {
outline: 1px solid red;
}
This draws a visible border around every element on the page, whether or not it normally has one. The idea is simple — if you can't tell where an element's boundaries are, make the boundaries visible.
What I saw didn't make sense at first. The background color was filling the entire screen, the way it should. But the outlined box sitting on top of it was small — and it wasn't even centered. It had extra space on one side and almost none on the other.
That was the part that stopped me. How can the background fill the whole screen, but the body only take up a small, off-center chunk of it? The background color was set on body. If the body were really that small, the color shouldn't be filling the screen at all.
So my assumption was wrong. I was looking at the wrong element.
It took a second to place it, because the actual culprit had no visual presence anywhere in my styles — I hadn't given it a color, a border, anything. It was <main>. I'd added it early on for semantic structure and then more or less forgotten it existed, because it never looked like anything. But it was still there in the HTML, still taking up space in the layout, and the browser's default styling for it was enough to throw the whole thing off-center.
That's the part I hadn't internalized yet: every element in HTML takes up layout space, even the ones you can't see. Invisibility isn't the same as absence.
The fix was one line:
main {
display: contents;
}
display: contents removes an element from the layout entirely — visually, it's as if <main>'s children became direct children of <body>. But the element itself stays in the HTML, which matters, because screen readers and search engines still read <main> as a landmark for page structure. So I got to keep the semantic meaning without it interfering with the layout.
The card centered correctly after that, at every width.
What I actually took from this wasn't the fix itself — display: contents is a one-line answer I could have just been told. It was the order of operations that got me there: when something about spacing or alignment looks wrong and the CSS doesn't explain it, the problem is often not in the CSS at all. It's in an element you forgot was in the HTML.
Top comments (0)