css – Bizarre behaviour with enter labels, and likewise the password discipline on Chrome

I’ve made a easy registration from for my web site:

<div class="card mb-3 login-register-container centerItem mt-5">
  <div class="centerItem ">
    <div class="card-body" fashion="text-align: middle">
      <h3>REGISTER</h3>
    </div>
    <div class="card-body">

      <div class="centerItem mb-5 p-3 login-register-body">
        <div class="form-outline">
          <enter mdbLabel sort="e mail" id="typeEmail" class="form-control"/>
          <label mdbInput class="form-label" for="typeEmail">E mail</label>
        </div>
        <div class="form-outline mt-3">
          <enter sort="password" worth="" autocomplete="false" id="typePassword" class="form-control"/>
          <label class="form-label" for="typePassword">Password</label>
        </div>

        <div class="form-outline mt-3">
          <enter sort="password" worth="" autocomplete="false" id="confirmPassword" class="form-control"/>
          <label class="form-label" for="confirmPassword">Affirm Password</label>
        </div>

        <div fashion="padding-left: 35px; font-size: 12px; show: flex" class="form-check centerItem mt-2">
          <enter fashion="width: 24px"
            mdbCheckbox
            class="form-check-input"
            sort="checkbox"
            worth=""
            id="flexCheckDefault"
          />
          <label class="form-check-label" for="flexCheckDefault">
            Click on to verify that you've learn and Settle for the Phrases and Circumstances and Privateness Coverage for *
          </label>
        </div>

        <div class="d-grid gap-2 col-6 mx-auto mt-3 w-100">
          <button class="btn btn-dark" sort="button">Register</button>
        </div>

        <div class="d-grid gap-2 col-6 mx-auto mt-3">
          <button [routerLink]="['/login']" class="btn btn-primary" sort="button">Again To Login</button>
        </div>
      </div>


    </div>
  </div>
</div>

I’m presently having 2 subject with this.

Firstly on the e-mail enter, after I sort in a e mail handle the label transfer to the highest of the enter field, as anticipated, however after I click on off the e-mail discipline then the label strikes again over the inputted e mail, as within the picture.

My second subject is within the chrome browser with the password. The password auto populated with a random password and once more with the label overlapping as wit the e-mail subject.

I’m questioning if anybody might help repair this.

Word that is my customized css file as nicely:

.fullMaxWidth {
  max-width: 100% !necessary;
}

.bg-dark {
  background-color: #141619 !necessary;
}

.navBarButtonLanding {
  font-size: 20px;
  coloration: white;
  text-decoration: none;
}

.centerItem {
  margin: 0 auto;
}

.landingPageWidth {
  width: 75%;
}

.login-register-container {
  width: 50%;
}

.login-register-body {
  max-width: 500px;
  width: 100%;
  border: 1px stable darkslategray;
  border-radius: 5px;
}

.landingPageWidth-text {
  width: 500px;
}

.btn-link {
  text-decoration: none !necessary;
  coloration: white !necessary;
  background-color: clear !necessary;
}


@media display and (max-width: 1200px) {
  .landingPageWidth, .login-register-container, .landingPageWidth-text {
    width: 100%;
  }
}