HTML Text input field different width to others in the same class - html

Question

Sorry if the title isn't clear, I couldn't think of a shorter way of stating it without taking away to much.
Now, I have made a simple contact form (currently doesn't submit etc) with 4 labels and 4 text inputs. Each pair is contained inside it's own div and then styled by class.
Everything lines up and is where I want it, except the 4th div is off. The text field is one pixel wider than the rest, which also bumps the label out of alignment.
Here's what I've got...
HTML:
<div id="contact-form">
<div id="form-title">
<h3>Contact Form</h3>
<h5>Enter your details below to contact me</h5>
</div>
<form id="contact">
<div class="input">
<label>First name:
<input class="txt-box" type="text" />
</label>
</div>
<div class="input">
As above, "Surname"
</div>
<div class="input">
As above, "Phone"
</div>
<div class="input">
As above, "Email"
</div>
</form>
</div>
CSS:
.input {
width:100%;
display:inline-block;
}
.input label {
display:inline-block;
vertical-align:left;
text-align:right;
padding:0;
}
.input input {
width:60%;
margin:0 5px 0 3px;
display:inline-block;
vertical-align:right;
}
Here's how it displays
Title...
First name: [text]
Surname: [text]
Phone: [text]
Email: [text ]
I've been through all the other code and nothing should be interacting with this section at all.
Any ideas would be greatly appreciated, also please note that I've searched and tried and tested so the way that it's styled may not be the best or most efficient.
EDIT:
Here's the full code of the section.
HTML:
<div id="contact-form">
<div id="form-title">
<h3>Contact Form</h3>
<h5>Enter your details below to contact me.</h5>
</div>
<form id="contact">
<div class="input">
<label>First name
<input class="txt-box" type="text" placeholder="John" />
</label>
</div>
<div class="input">
<label>Surname:
<input class="txt-box" type="text" placeholder="Smith />
</label>
</div>
<div class="input">
<label>Phone
<input class="txt-box" type="text" placeholder="0412345678" />
</label>
</div>
<div class="input">
<label>Email
<input class="txt-box" type="text" placeholder="j.smith#example.com" />
</label>
</div>
</form>
</div>

Answer 1

try this css
.input {
width:100%;
display:inline-block;
}
.input label {
display:inline-block;
vertical-align:left;
text-align:right;
padding:0;
width:45%;
}
.input input {
width:55%;
margin:0 5px 0 3px;
display:inline-block;
vertical-align:left;
}
<div id="contact-form">
<div id="form-title">
<h3>Contact Form</h3>
<h5>Enter your details below to contact me.</h5>
</div>
<form id="contact">
<div class="input">
<label>First name:
<input class="txt-box" type="text" placeholder="John" />
</label>
</div>
<div class="input">
<label>Surname:
<input class="txt-box" type="text" placeholder="Smith" />
</label>
</div>
<div class="input">
<label>Phone:
<input class="txt-box" type="text" placeholder="0412345678" />
</label>
</div>
<div class="input">
<label>Email:
<input class="txt-box" type="text" placeholder="j.smith#example.com" />
</label>
</div>
</form>
</div>
jsfiddle output

Answer 2

Through trial and error I have found a way to make it work properly.
Here's the updated html:
<div id="contact-form">
<div id="form-title">
<h3>Contact Form</h3>
<h5>Enter your details below to contact me.</h5>
</div>
<form id="contact">
<div class="input">
<label>First name:</label>
<input class="txt-box" type="text" placeholder="John" />
</div>
<div class="input">
<label>Surname:</label>
<input class="txt-box" type="text" placeholder="Smith" />
</div>
<div class="input">
<label>Phone:</label>
<input class="txt-box" type="text" placeholder="0412345678" />
</div>
<div class="input">
<label>Email:</label>
<input class="txt-box" type="text" placeholder="j.smith#example.com" />
</div>
</form>
</div>
And the update css:
.input {
width:100%;
}
.input label {
width:35%;
display:inline-block;
vertical-align:left;
text-align:right;
padding:0;
padding-top:5px;
}
.txt-box {
width:50%;
margin:0;
margin-left:3px;
display:inline-block;
vertical-align:right;
}