Get inner div to adapt to outer div width with padding - html

Question

This might be a trivial question, but as you can see in this fiddle I have an inner and an outer div. The outer div has a percentage width on the body and the inner div should be exactly as wide as the outer div.
<div id="container">
<div id="content">Content</div>
</div>
The problem is, the inner div width does not adapt to the padding of the outer div. How do I get the inner div to do this?
The purpose of this is, that the div should be part of a form which consists of input fields and select boxes which also have a percentage width and a padding. The div should now be exactly as wide as the other form elements with padding.

Answer 1

#container {
width:80%;
border: 1px solid red;
padding: 10px;
}
#content {
border: 1px solid blue;
padding: 0 10px;
margin-left:-10px;
margin-right:-10px;
}
<div id="container">
<div id="content">Content</div>
</div>

Answer 2

I removed left and right padding.
Try this
#container {
width:80%;
border: 1px solid red;
padding: 10px 0px 10px 0px; //changed this
}
Demo here

Answer 3

Just change the padding on the container. Also, block level elements will go to 100% width unless you specify otherwise.
http://codepen.io/anon/pen/wKwoPJ
#container {
width:80%;
border: 1px solid red;
padding: 10px 0px;
}
#content {
border: 1px solid blue;
}

Answer 4

Remove the left and right padding from the parent and add it to the child element. Using box-sizing with border-box will ensure that the 1px border of the child will stay inside the parent element.
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
#container {
width:80%;
border: 1px solid red;
padding: 10px 0;
}
#content {
border: 1px solid blue;
padding: 0 10px;
width: 100%;
}
<div id="container">
<div id="content">
Content
</div>
</div>

Answer 5

you can add this css to the #content -
width: calc(100% + 20px);
margin-left: -10px;
Full Code -
#container {
width: 80%;
border: 1px solid red;
padding: 10px;
}
#content {
border: 1px solid blue;
width: calc(100% + 20px);
margin-left: -10px;
box-sizing: border-box;
}
#othercontent {
margin-top: 10px;
border: 1px solid green;
}
<div id="container">
<div id="content">
I'm not following the padding
</div>
<div id="othercontent">
I'm following..
</div>
</div>