DEV Community

Raj
Raj

Posted on

A Small CSS Mistake That Made Me Waste Time

Yesterday, I noticed that my background color was not covering the full width.

At first, I was checking the width, padding, margin, and even thinking about adding a border.

Normally, we can use the universal selector * for the basic CSS reset.
In my particular case, I noticed the problem and fixed the body specifically.

So readers should understand both approaches, instead of thinking body { margin: 0; } is the only correct method.

Then I realized the actual problem was the browser's default margin on the body.

In my case
I fixed it by adding:
html,
body {
margin: 0;
padding: 0;
}

After that, my background color covered the full width.
But normally...When starting a new HTML/CSS project, I usually prefer to set the basic reset using the universal selector:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

This resets the default margin and padding for all elements.
So, my case was specifically about the body margin, but as a general project setup, you can use the universal selector to reset the default spacing.

when the real problem is just 8px of default body margin

Top comments (0)