Here is Why ‘it works on My Machine’ Is a Communication Bug, not a Code Bug.

Tags: css, beginners, web dev, html

Body:
“It works on my machine.”

That’s what I told my friend when I sent him my first website. On my laptop it was perfectly centered. On his phone? All text hugged the left side.

Here’s the bug and the fix, so you save 2 hours.

The Code That Broke
I used this CSS thinking it was enough:

css
body {
  margin: 40px auto; 
  text-align: center;
}
Result: Left-aligned. Why?

The Fix: margin: auto needs a width
margin: auto splits leftover horizontal space evenly. If your element is width: 100%, there’s zero leftover space. Nothing to split.

Fixed CSS:
body {
  width: 90%;           /* Creates leftover space */
  max-width: 600px;     /* Stops it getting too wide */
  margin: 40px auto;    /* Now it centers */
  text-align: center;
}
How I Explain It to Clients

A baking tray as wide as the oven can’t be centered. Shrink the chapati with width: 90%. Now margin: auto slides it to the middle.

other ways to fix the bug:

Flexbox for components:
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
Grid for full pages — 1 line:
.parent {
  display: grid;
  place-items: center;
  min-height: 100vh;
}
Debug Checklist
In DevTools → Computed tab, check:
1. Is width: auto? Add width: 90% or 600px
2. Is it display: inline? Change to block
3. For vertical center: Does parent have height?

**Live demo of my page:**https://codepen.io/Coder-winnie-win/pen/pvEBpNG

What CSS bug stole hours from you? Drop it below 👇