Answers for "box sixzing property"

css box-sizing

/* Always keep this code inside your css file*/
*{
  box-sizing: border-box;
}
.div-1{
  /* width: 100%; Default - Block Element*/
  padding: 10px;
  box-sizing: border-box; 
  /* 
    content-box is default for box-sizing
    content-box will remove border-box effect.
  */
}
/*
  after applying padding [border also will increase the width]
  10px added to left and right from padding
  the .div-1 width is now 100% + 20px, and that may cause errors in your layout
  according to your work.
  to solve the problem and force the width to be as i give to it
  we use box-sizing => our div width will not be affected by padding or border
*/

box sizing border box

*{
 box-sizing: border-box;
 }