CSS - SearchBox overlapping divs' padding - html

Question

I had this problem quite a few times and never were able to solve it.
I basically just have a div with 20px padding and would like to fit the searchbox 100% relative to the divs' possible width (including the padding). But the searchbox keeps overlapping the padding from the div. Can anybody help me there?
<div class='content'>
<form id='submit' action='' method=''>
<input type='text' autofocus='on' placeholder='Search with DuckDuckGo' autocomplete='off' id='searchBox'>
</form>
<p>Lorem</p>
<p>Lorem</p>
<p>Lorem</p>
</div>
 
.content { # This is the main div!
background-color: rgba(240,240,240, 1);
padding: 20px;
display: inline-block;
text-align: center;
margin-top: 25%;
width: 40%;
box-shadow: 0px 0px 20px 3px #101010;
}
#searchBox { # This here is the search box that keeps overlapping the padding from the content div...
width: 100%;
height: 30px;
padding: 10px;
font-size: 20px;
border: 1px rgba(10,10,10, 0.2) solid;
#border: none;
color: rgba(10,10,10, 0.5);
font-family: 'Roboto', 'Tahoma', 'sans-serif';
}
Here is a JS fiddle example to visualize it a little bit better.

Answer 1

You can remove the padding property for #searchBox and explicitly set the padding-top and padding-bottom property to 10px (Which will remove left and right padding).
#searchBox {
width: 100%;
height: 30px;
padding-top: 10px;
padding-bottom: 10px;
font-size: 20px;
border: 1px rgba(10,10,10, 0.2) solid;
color: rgba(10,10,10, 0.5);
font-family: 'Roboto', 'Tahoma', 'sans-serif';
}
https://jsfiddle.net/0e2Ljgr8/1/
An alternative solution would be to reduce the width of #searchBox to 90% width, as shown in this JSFiddle:
https://jsfiddle.net/0e2Ljgr8/3/