title: How do I fit the borders in the input text type?
body: <p><a href="https://i.stack.imgur.com/9EciZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9EciZ.png" alt="This is what i am getting" /></a>
  I want the border to align with the box , what is wrong with my code ? Any help would be appreciated .</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> .contact {
        background-color: rgb(233, 230, 227);
        height: 200px;
      }
      .contact h3 {
        text-align: center;
      }
      .form {
        text-align: center;
        max-width: 344px;
        width: 100%;
        border: 1px solid grey;
        transform: translatex(450px);
      }
      .form input {
        width: 100%;
        padding: 7px;
        /* font-size: 20px;*/
        border-radius: 5px;
        margin-top: 30px;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;section class="contact"&gt;
              &lt;h3&gt;
                  Contact Us
              &lt;/h3&gt;
              &lt;div class="form"&gt;
                  &lt;input type="text" class="name" id="name"&gt;
              &lt;/div&gt;
          &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>