How to get this form to be in the center of the page horizontally

I simply need the form to be within the center of the screen, and for its width to be 325px. Currently it is slightly to the left of the center. You can see here. The text that says "In the middle" is not directly in the center of the form.

How do I make the form centered horizontally no matter the viewport size?

Here is the form HTML:

<div class='form animated flipInX'>
  <h2>Sign up Today</h2>
  <form>
    <input placeholder='Your Email Address' type='text'>

    <button class='animated infinite pulse'>Let's Go!</button>
  </form>
</div>

and here's a codepen

Any suggested code changes is great, thanks!

Solution

I just look at your code and change some.

YOUR CSS

 .form {
  position: absolute; // remove this one
  background: #fff;
  width: 325px;
  margin: -140px 0 0 -182px; // change this code to margin: 0 auto;
  padding: 40px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

TRY THIS CSS

.form {
  background: #fff;
  margin: 0 auto;
  width: 325px;
  padding: 40px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

JSFiddle! Hope it helps :)