title: Reducing modal window size to fit form fields modifing CSS
body: <p>I'm building a webpage and I need to create a registration and login form.</p>
  
  <p>I wrote all the html/css code but I can't understand how to make fields to fit the form. I tried to modifie <strong>.modal-dialog</strong> and <strong>.modal-content</strong> CSS and by modifing .modal-content <strong>padding</strong> I can reduce the size of fields but a big white space remains all around them. 
  How can I eliminate this white space? </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>.modal {}
  
  .modal-content {
    padding: 80px;
  }
  
  .modal-body input {
    padding: 5px;
    margin-bottom: 30px;
    width: 100%;
    box-sizing: border-box;
    box-shadow: none;
    outline: none;
    border: none;
    border-bottom: 2px solid #999;
  }
  
  .modal-body input[type="submit"] {
    border-radius: 25px;
    font-size: 20px;
    height: 40px;
    cursor: pointer;
    background: rgb(255, 69, 0);
    color: #fff;
    margin-bottom: 0;
  }
  
  .modal-body input[type="submit"]:hover {
    background: rgb(255, 127, 80);
    color: #fff;
  }
  
  .modal-body form div {
    position: relative;
  }
  
  .modal-body form div label {
    position: absolute;
    top: 3px;
    pointer-events: none;
    left: 0;
    transition: .5s;
  }
  
  .modal-body input:focus~label,
  .modal-body input:valid~label {
    left: 0;
    top: -16px;
    color: rgb(169, 169, 169);
    font-size: 12px;
    font-weight: bold;
  }
  
  .modal-body input:focus,
  .modal-body input:valid {
    border-bottom: 2px solid rgb(169, 169, 169);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--Nav bar buttons--&gt;
  &lt;form&gt;
    &lt;!-- Button trigger modal --&gt;
    &lt;button id="signupBtn" type="button" class="btn btn-primary" data-toggle="modal" data-target="#signupModalBtn"&gt;Registrati&lt;/button&gt;
    &lt;button id="loginBtn" type="button" class="btn btn-primary" data-toggle="modal" data-target="#loginModalBtn"&gt;Log
                          In&lt;/button&gt;
  &lt;/form&gt;
  
  &lt;!-- Modal SignUp--&gt;
  &lt;div class="modal fade" id="signupModalBtn" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-dialog" role="contentinfo"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;h5 class="modal-title" id="exampleModalLabel"&gt;Registrati e inizia ad imparare!&lt;/h5&gt;
          &lt;button id="signupCloseBtn" type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                                      &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                                  &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;form&gt;
            &lt;div&gt;
              &lt;input type="text" name="Username" required=""&gt;
              &lt;label&gt;Username&lt;/label&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;input type="text" name="First Name" required=""&gt;
              &lt;label&gt;First Name&lt;/label&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;input type="text" name="Second Name" required=""&gt;
              &lt;label&gt;Second Name&lt;/label&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;input type="email" name="Email" required=""&gt;
              &lt;label&gt;Email &lt;/label&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;input type="password" name="Passowrd" required=""&gt;
              &lt;label&gt;Password&lt;/label&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;input type="password" name="Re-Enter Password" required=""&gt;
              &lt;label&gt;Re-Enter Password&lt;/label&gt;
            &lt;/div&gt;
            &lt;input id="singupInternalBtn" type="submit" value="Registrati" name="Submit"&gt;
          &lt;/form&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;p id="signupBtnTextFooter"&gt;Hai già un account?Effettua il Log In!&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'd like to create a registration/logIn form like Udemy ones (speaking about size),I'll add an img of what I got now!</p>
  
  <p><a href="https://ibb.co/StStxbH" rel="nofollow noreferrer">https://ibb.co/StStxbH</a></p>