title: Input width percentage not behaving correctly
body: <p>I would like my input field to be 98% of the width of the container it is in. The problem is that when I set it to 98% width the input goes off the screen. Is there a special way to define a width of an input or something?</p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;div class="large-12 columns centered"&gt;
       &lt;input class="typeahead" type="text" placeholder="Start typing to search"  spellcheck="false" autofocus /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is my CSS:</p>
  
  <pre><code>input {
      padding: 0.8rem 0.9rem;
      height: inherit;
      font-size: 1.25rem;
      margin: 0 0 .5rem 0;
      display: block;
      width: 98%;
  }
  </code></pre>
  
  <p>But for some reason, this is the result:
  <img src="https://s21.postimg.org/yb2sipydz/Screen_Shot_2014_02_28_at_11_59_19_AM.png" alt="Input Width"></p>