title: Placeholder Text Not Fitting Input Area
body: <p>I'm having a hard time finding help for this question, hope that asking is helpful for other beginners trying to figure this out.</p>
  
  <p>My placeholder text isn't fitting in the input area. Padding doesn't seem to be doing the trick, either (I took out the padding I had in the code as it wasn't working).</p>
  
  <p><strong>html</strong> </p>
  
  <pre><code>&lt;form&gt;
  &lt;input type="text" placeholder="email"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>form {
  margin:60px auto;
  width:350px;
  }
  
  input[type='text'] {
  width:300px;
  height:40px;
  }
  
  ::-webkit-input-placeholder {
  font-family:Open Sans, sans-serif;
  font-size:16px;
  }
  
  :-moz-placeholder { 
  font-family:Open Sans, sans-serif;
  font-size:18px;  
  }
  
  ::-moz-placeholder { 
  font-family:Open Sans, sans-serif;
  font-size:18px;  
  }
  
  :-ms-input-placeholder {  
  font-family:Open Sans, sans-serif;
  font-size:18px; 
  }
  </code></pre>