I think margin doesn't work

I think margin doesn't work
0

#1

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…


#2

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


#3

Thank you Dan, it is a very useful information… i have just applied it and it worked…


#4

Here’s an explanation in a bit more detail

https://www.paulirish.com/2012/box-sizing-border-box-ftw/