HTML CSS Box with padding and margin and 100% width? [duplicate]

Answer 1

You need to add Add box-sizing: border-box; property in your #box And remove margin: 20px;

Here is the updated CSS:

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
}
#box {
    width: 100%;
    height: 100%;
    border: 5px solid red;
    padding: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

working fiddle