I have just finished my tribute page challange and when i check my page from mobile, i have realized that margin doesn’t work in main id. The main border is sticking on right side. Could you please check ? There would be a mistake there, i am not fully comfortable with padding and margin…
As far as I can see, just adding this at the top of the CSS fixes it:
* {
box-sizing: border-box;
}
You need to fix CSS’ box model by applying box-sizing: border-box to everything. So before you apply that, borders and padding on elements add to the width of things, so if you have something that is 100px wide + a 1px border + 5px of padding all around, the actual width will be 112px. Margins etc become very difficult to calculate because of this.
If you apply border-box, the actual width will be 100px. This should be the default, but it isn’t for various historical reasons. Note fixing box-sizing should be the first thing you do on every stylesheet you write: frameworks like Bootstrap include it by default
2 Likes
Thank you Dan, it is a very useful information… i have just applied it and it worked…
1 Like
Here’s an explanation in a bit more detail
1 Like