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 */ // Defines how the width and height of an element // are calculated: should they include padding and borders, or not * { box-sizing: border-box; }