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*/
1/*universial selector example to include padding, border, and margin
2in all box sizing totals*/
3* {
4 box-sizing: border-box;
5}
6/*example of div that will total 100% and not exceed it because it
7is using the border-box property*/
8div {
9box-sizing: border-box;
10width: 100%;
11border: solid #5B6DCD 10px;
12padding: 5px;
13margin: 10px;
14}
1.jumbotron
2{
3padding-top: 0px;
4padding-bottom:0px;
5background-image:url('images/car/car.jpg');
6background-size: cover;
7height:560px;
8 }
1box-sizing: border-box;
2box-sizing: content-box;
3
4/*content-box gives you the default CSS box-sizing behavior. If you set an element's
5width to 100 pixels, then the element's content box will be 100 pixels wide, and
6the width of any border or padding will be added to the final rendered width, making
7the element wider than 100px.
8
9border-box tells the browser to account for any border and padding
10in the values you specify for an element's width and height. */