Place two form elements inline - html

Question

I currently have 1 form with 2 elements inside it (an email input and a submit button). This form looks like this for me:
But some of my associates seem to have it looking like this:
My relevant HTML looks like this:
<header>
<div class="wrap nopad">
<h1>Share and Listen to Music.</h1>
<form>
<input type="email" placeholder="Email address to get started"><input type="submit" value="Get Started">
</form>
</div>
</header>
and the relevant CSS looks like this:
body {
background-color: #1B1B1E;
color: #fff;
margin:0;
padding: 0;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
.wrap {
width:685px;
padding:0 15px;
margin:0 auto;
display: block;
}
.wrap.nopad {
width:700px;
padding: 0;
}
header {
width:100%;
padding:200px 0 100px;
background-color: #2de6c0;
display: block;
}
header .wrap h1 {
color:#000;
text-align: center;
display: block;
font-weight:bolder;
text-transform: uppercase;
font-size:45.4px;
letter-spacing: 0px;
}
header .wrap h1 span {
text-decoration: underline;
}
header form {
padding:20px 0 0;
width:660px;
margin:0 auto;
}
input[type=email] {
color:#000;
padding:20px;
display: inline-block;
outline: 0;
border: 0;
width:470px;
text-transform: uppercase;
font-size:24px;
font-weight: 500;
}
input[type=submit] {
background-color: #000;
color:#FFF;
text-transform:uppercase;
font-size:16px;
padding:25px 20px;
display: inline-block;
font-weight:500;
outline: 0;
border: 0;
cursor: pointer;
float: right;
}
Could you please point me in the right direction so I can fix my code to work in all browsers and be inline.
Thanks!

Answer 1

Fiddle
Reduce the padding of black submit button button.
input[type=submit]
{
padding: 25px 16px;
}
See the Demo
Demo2
It ll give you best design
input email button --> Width:71.4%
submit button ---> Remove left and right padding and add width 22.54%