The reason why I’m asking is because there is
padding: 25px;
added to it.
Is it a good idea here to add box-sizing or not?
Box-sizing Removed
https://jsfiddle.net/wby16ep8/1/
.container {
width: 936px;
padding: 25px;
margin: 100px auto;
border-radius: 25px;
border: 2px solid #0059dd;
background: #000000;
}
Box-sizing Added
25 x 2 = 50 + 4 = 54 + 936 = 990
https://jsfiddle.net/wby16ep8/5/
.container {
width: 990px;
padding: 25px;
margin: 100px auto;
border-radius: 25px;
background: #000000;
border: 2px solid #0059dd;
box-sizing: border-box;
}
If the rest of your code uses box-sizing: border-box;
, use it here as well.
Other Note
If you want to support responsive design, yes.
Also, use the following code:
.container {
max-width: 990px; /* Change */
width: 100%; /* Change */
padding: 25px;
margin: 100px auto;
border-radius: 25px;
background: #000000;
border: 2px solid #0059dd;
box-sizing: border-box;
}
If you don't want to support responsive design, using box-sizing
would just be a preference. Do you want the width to be included or not?