1/* Always keep this code inside your css file*/
2*{
3 box-sizing: border-box;
4}
5.div-1{
6 /* width: 100%; Default - Block Element*/
7 padding: 10px;
8 box-sizing: border-box;
9 /*
10 content-box is default for box-sizing
11 content-box will remove border-box effect.
12 */
13}
14/*
15 after applying padding [border also will increase the width]
16 10px added to left and right from padding
17 the .div-1 width is now 100% + 20px, and that may cause errors in your layout
18 according to your work.
19 to solve the problem and force the width to be as i give to it
20 we use box-sizing => our div width will not be affected by padding or border
21*/
1html {
2 box-sizing: border-box;
3}
4
5*,
6*:before, *:after {
7 box-sizing: inherit;
8}
9
1html {
2 box-sizing: border-box;
3}
4
5*,
6*:before, *:after {
7 box-sizing: inherit;
8}
1div{
2 box-sizing: border-box;
3}
4/* CSS box-sizing property specifies whether the padding and border of an element should be included in its total width and height or not. */