title: Make input field always centered
body: <p>This is so simple, or seems like it, but I cannot get it.</p>
  
  <p>I'm simply trying to always keep my form <code>input centered</code>, and be <code>responsive</code> to changes in the <code>window size</code>.</p>
  
  <p>Instead, it stays to the <code>left</code>.</p>
  
  <p>Here is html and css code below:-</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    #teaser-input{
       max-width:100%;
      }
       #teaser-input input{
        margin:auto;
        font-size:2.0em;
        color:#36393D;
        text-align:center;
      
       }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div id="teaser-input"&gt;
       &lt;form&gt;
        &lt;input type="text" name="email" value="Notify me at: you@provider.com"&gt;
       &lt;/form&gt;
      &lt;/div&gt;&lt;!--teaser-input--&gt;</code></pre>
  </div>
  </div>
  </p>