HTML input fields margin - html

Question

I want to make 3/4 input fields next to each other, with a margin in between. However, using a margin makes the last inputfield too big/too short(using calc).
Been trying to figure out how to do this but can't seem to find a solution
How my current CSS code looks like:
input {
background-color: darkgreen;
border: none;
color: white;
padding: 5px;
border-radius: 8px;
width: calc(33% - 20px);
box-sizing: border-box;
margin-right: 20px;
}
Background has a 75% width and padding
Current result
Wanted result

Answer 1

Hope this work but it will work for one row only
input {
background-color: darkgreen;
border: none;
color: white;
flot:left:
padding: 5px;
border-radius: 8px;
width: calc(33.333333% - 20px);
box-sizing: border-box;
}
input + input{
margin-left: 30px;
}
If you want to use for multiple rows then you can use below the structure.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:after,
:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-row {
margin-right: -15px;
margin-left: -15px;
}
.form-row:before,
.form-row:after {
display: table;
content: " ";
}
.input-box {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
width: 33.3333333%;
float: left;
}
.input-field {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: white;
background-color: darkgreen;
border: none;
border-radius: 8px;
}
<div class="form-row">
<div class="input-box">
<input type="text" class="input-field" value="input 01">
</div>
<div class="input-box">
<input type="text" class="input-field" value="input 02">
</div>
<div class="input-box">
<input type="text" class="input-field" value="input 03">
</div>
</div>

Answer 2

The problem is that all three of your elements have the full margin-right applied to them. If you want your final <input> element to stretch to the edge of the container, you'll want to only apply the margin-right to the first two <input> elements.
The best way to do this would be to combine the :not and :last-of-type pseudo-classes, as can be seen in the following:
input {
background-color: darkgreen;
border: none;
color: white;
padding: 5px;
border-radius: 8px;
width: calc(33% - 20px);
box-sizing: border-box;
}
input:not(:last-of-type) {
margin-right: 20px;
}
<input />
<input />
<input />
Note that this will have the added effect of making all three <input> elements slightly wider, as their width calculation is now derived from a larger container.