The input with 100% width inside a div is overlapping the div - html

Question

I'm having a problem with margin in the input with width 100%, because it is overlapping the div container.
I looked for solutions on the forum, and the possible solution was to apply box-sizing: border-box, but it is not working.
Solution not working to me: CSS - Input at 100% width overlaps div
jsfiddle: https://jsfiddle.net/igorac1999/fuovpkba/
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *::before, *::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
body, pre {
margin: 0;
padding: 0;
}
.container {
width: 100%;
max-width: 980px;
margin: 0 auto;
}
.container_calculator {
width: 100%;
max-width: 400px;
background-color: tomato;
border-radius: 5px;
margin: 5px auto;
}
.container_calculator > label {
display: inline-block;
color: #fff;
margin: 10px 0 0 20px;
}
.container_calculator > input {
height: 20px;
border: 1px solid tomato;
border-radius: 5px;
width: 100%;
margin: 5px 20px;
}
div.result_bin2dec {
border: 1px solid #edf2f7;
background-color: #edf2f7;
border-radius: 10px;
margin-top: 30px;
height: 35px;
}
<div class="container">
<div class="container_calculator">
<label>Number</label>
<input type="text" id="number">
</div>
<div class="result_bin2dec">
<pre>
Dec: 10
Bin: 01
</pre>
</div>
</div>
enter image description here

Answer 1

instead margin on the children, you may use padding on the parent , so it can be included in box-sizing
as specified in the linked answer you said did not work for you , see below the link to specification of box-sizing to understand how it works and how to use it
possible example: https://jsfiddle.net/gr7cbevj/
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*,
*::before,
*::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
body,
pre {
margin: 0;
padding: 0;
}
.container {
width: 100%;
max-width: 980px;
margin: 0 auto;
}
.container_calculator {
width: 100%;
max-width: 400px;
background-color: tomato;
border-radius: 5px;
margin: 5px auto;
padding: 0 20px;/* added */
box-sizing: border-box;/* added */
}
.container_calculator>label {
display: inline-block;
color: #fff;
margin: 10px 0 0 0px;/* modified */
}
.container_calculator>input {
height: 20px;
border: 1px solid tomato;
border-radius: 5px;
width: 100%;
margin: 5px 0px;/* modified */
}
div.result_bin2dec {
border: 1px solid #edf2f7;
background-color: #edf2f7;
border-radius: 10px;
margin-top: 30px;
height: 35px;
}
<div class="container">
<div class="container_calculator">
<label>Number</label>
<input type="text" id="number">
</div>
<div class="result_bin2dec">
<pre>
Dec: 10
Bin: 01
</pre>
</div>
</div>
see the use of box-sizing .
The box-sizing CSS property sets how the total width and height of an element is calculated.

Answer 2

You are adding 20px to the margin.
change your css for this element:
PREVIOUS:
.container_calculator > input {
height: 20px;
border: 1px solid tomato;
border-radius: 5px;
width: 100%;
margin: 5px 20px;
}
NEW:
.container_calculator input {
height: 20px;
border: 1px solid tomato;
border-radius: 5px;
width: 100%;
margin: 5px 0px;
}

Answer 3

Just insert padding to parent and remove margin in input and label.
.container_calculator {
padding: 5px 20px;<-------------insert this line
//Other codes...
}
.container_calculator > input {
margin: 5px 20px;<--------------remove this
//Other codes...
}
.container_calculator>label {
margin: 10px 0 0 20px;<---------remove this
//Other codes...
}
For space between input and label,you can use of :
.container_calculator>input{
margin-top:5px;
//Other codes...
}
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*,
*::before,
*::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
body,
pre {
margin: 0;
padding: 0;
}
.container {
width: 100%;
max-width: 980px;
margin: 0 auto;
}
.container_calculator {
width: 100%;
max-width: 400px;
background-color: tomato;
border-radius: 5px;
margin: 5px auto;
padding: 5px 20px;
}
.container_calculator>label {
display: inline-block;
color: #fff;
}
.container_calculator>input {
height: 20px;
border: 1px solid tomato;
border-radius: 5px;
width: 100%;
}
div.result_bin2dec {
border: 1px solid #edf2f7;
background-color: #edf2f7;
border-radius: 10px;
margin-top: 30px;
height: 35px;
}
<div class="container">
<div class="container_calculator">
<label>Number</label>
<input type="text" id="number">
</div>
<div class="result_bin2dec">
<pre>
Dec: 10
Bin: 01
</pre>
</div>
</div>