css submit button and input text doesn't have the same width

Problem

Though I made the submit button and the input text exactly

width:60%

but when i run the app, they don't have the same width:

this is a jsfiddle

http://jsfiddle.net/vrXd5/

could you help please?

Problem courtesy of: user2208349

Solution

That's because both border-box attributes are different by default..

Use box-sizing: content-box on the button, or box-sizing: border-box on the Input Elements.

Solution courtesy of: Tarulia

Discussion

I just added

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

and the problem was solved

JSfiddle Demo

Discussion courtesy of: Paulie_D

This recipe can be found in it's original form on Stack Over Flow.