Background Colour for DIV class

I have a DIV class filled with different elements as of now. Now, I want to give that entire div class (not the container, just the login div) a background-colour, which just surrounds that div with a little bit of space on the top, bottom, left and right (around 10px). However, when I try giving the div a background colour, it does this:

The background colour for the elements is all over the place. I don't want to move the elements in any different position. I just want the background colour to surround the elements perfectly, with just a little space on the top, bottom, left and right (of 10px). How can I accomplish this?

This is all my code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
body {
  background-color: #DBE2EF;
  position: fixed;
}

.textHead {
  font-family: Lora;
  margin-left: 340px;
  margin-top: 130px;
}

.logintxt {
  font-family: Lora;
  margin-left: 285px;
  margin-top: 50px;
}

.loginemailtxt {
  font-family: Lora;
  border: 1px solid black;
  width: 250px;
  height: 30px;
  margin-left: 285px;
  margin-top: 40px;
  outline: none;
  border-radius: 5px;
}

.loginemailtxt::placeholder {
  color: black;
  padding-left: 3px;
}

.loginpwdtxt {
  font-family: Lora;
  border: 1px solid black;
  width: 250px;
  height: 30px;
  margin-left: -256px;
  margin-top: 130px;
  outline: none;
  border-radius: 5px;
  position: fixed;
}

.loginpwdtxt::placeholder {
  color: black;
  padding-left: 3px;
}

.loginbtn {
  position: fixed;
  margin-top: 220px;
  margin-left: -190px;
  width: 120px;
  height: 40px;
  border-radius: 10px;
  background-color: #3F72AF;
  border: none;
  cursor: pointer;
  font-family: Lora;
}

<!-- language: lang-html -->

<div class="container">
  <div class="login">
    <h2 class="textHead">MedConnect</h2>
    <h2 class="logintxt">Log In to Your Account</h2>
    <input type="text" class="loginemailtxt" name="email" placeholder="Email Address">
    <input type="password" class="loginpwdtxt" name="password" placeholder="Password">
    <button class="loginbtn" type="button" name="button">Log In</button>
    <h5 style="margin-top: 230px; margin-left: 310px; font-family: Lora;">Don't have an Account? <u style="cursor: pointer;">Sign Up</u></h5>
    <h6 style="margin-top: 40px; margin-left: 260px; font-family: Lora;">By clicking "Log In", you agree to our <u style="cursor: pointer;">Terms</u> and <u style="cursor: pointer;">Privacy Policy</u></h6>
  </div>
</div>

<!-- end snippet -->

You have to remove all sorts of position: fixed declarations as they tend to mess with layouts (in general, they're hard to work with)

Also adjusted some widths and margins that are not needed. Mainly, you need somethign like this:

.login{
   margin: 0 auto;
   padding: 10px;
   background-color: green;
   width: 300px;
   text-align: center;
}

See sample code below (which should get you closer to what you want)

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
body {
  background-color: #DBE2EF;
  font-family: Lora;
}

.login{
   margin: 0 auto;
   padding: 10px;
   background-color: green;
   width: 300px;
   text-align: center;
}

input, button{
  margin: 10px;
}

.loginemailtxt {
  border: 1px solid black;
  width: 250px;
  height: 30px;
  outline: none;
  border-radius: 5px;
}

.loginemailtxt::placeholder {
  color: black;
  padding-left: 3px;
}

.loginpwdtxt {
  border: 1px solid black;
  width: 250px;
  height: 30px;
  outline: none;
  border-radius: 5px;
}

.loginpwdtxt::placeholder {
  color: black;
  padding-left: 3px;
}

.loginbtn {
  width: 120px;
  height: 40px;
  border-radius: 10px;
  background-color: #3F72AF;
  border: none;
  cursor: pointer;
}

<!-- language: lang-html -->

<div class="container">
  <div class="login">
    <h2 class="textHead">MedConnect</h2>
    <h2 class="logintxt">Log In to Your Account</h2>
    <input type="text" class="loginemailtxt" name="email" placeholder="Email Address">
    <br/>
    <input type="password" class="loginpwdtxt" name="password" placeholder="Password">
    <br/>
    <button class="loginbtn" type="button" name="button">Log In</button>
    <h5>Don't have an Account? <u style="cursor: pointer;">Sign Up</u></h5>
    <h6>By clicking "Log In", you agree to our <u style="cursor: pointer;">Terms</u> and <u style="cursor: pointer;">Privacy Policy</u></h6>
  </div>
</div>

<!-- end snippet -->