Cant get input text boxes and buttons the same size

Question

I'm trying to create a form with input text boxes and submit boxes being perfectly lined up and equal in size. However for some reason the submit button is a few pixels out of alignment and I cant figure out the cause.

The elements are the same size and I've tried removing margins and paddings but havent been able to resolve the issue.

I've created a simple jfiddle to illustrate my problem. https://jsfiddle.net/peacefulgoldfish/d50h7n9p/26/

Appreciate any help and advice on this.

html

<div>
<form>
<input>
<br>
<input>
<br>
<input type="submit">
</form>
</div>

css

#div{

  width:100%;
}

form{

  text-align: center;

}

input {
   box-sizing: border-box;
  height: 10%;
  width: 50%;

}

Answer 1

You must specify the box-sizing of the input to make all of them equal width. Here whats your updated CSS should look like:

div {
  font-size:0;
}
#form{  
  text-align: center;
  font-size: 14px;
}
input {
  height: 10%;
  width: 50%;
  box-sizing: border-box;
}