How to make a squared border around a form tag

Issue

I want to make a squared border around this html form tag, like a box

.main-form{
  width: 100%;
  position: absolute;
  border: 5px solid red;
  left: 0;
  right: 0;
}

<form class="main-form">
  <input type="text" class="first name" placeholder="Please type your first name!" required>
  <input type="text" class="last name" placeholder="Please type your last name!" required>
  <br><br><br><br>
  <input type="text" class="username" placeholder="Please type your username!" required>
  <input type="email" class="email" placeholder="Please type your email!" required>
  <br><br><br><br>
  <input type="password" class="password" placeholder="Please type a password!" required>
  <input type="password" class="password-confirm" placeholder="Please confirm password!" required>
  <br><br><br><br>
  <button class="sign-up-button">Sign up</button>
</form>

I added width: 100%; and then tried to reduce the percentage but the inputs move on other rows.

Solution

When you use position: absolute and both values right and left 0, you're essentially telling the browser to resize your form to the relative container. If what you want is to add the border around the form with no inner space, remove the right: 0 prop, or make the form static instead of relative.

See the first note on this article by Mozilla for more info using top, right, left and bottom to resize absolute blocks.

.main-form{
  position: absolute;
  border: 5px solid red;
  left: 0;
}

<form class="main-form">
  <input type="text" class="first name" placeholder="Please type your first name!" required>
  <input type="text" class="last name" placeholder="Please type your last name!" required>
  <br><br><br><br>
  <input type="text" class="username" placeholder="Please type your username!" required>
  <input type="email" class="email" placeholder="Please type your email!" required>
  <br><br><br><br>
  <input type="password" class="password" placeholder="Please type a password!" required>
  <input type="password" class="password-confirm" placeholder="Please confirm password!" required>
  <br><br><br><br>
  <button class="sign-up-button">Sign up</button>
</form>

Answered By - Guilherme Vieira