Css – How can I remove a unwanted boarder around my div container?

I have created a very simple registration form with react js. I have styled everything like I wanted but I jsut can’t remove a weird grey boarder around my registration form.

I already tried integrating a global css file and remove boarder from the body of the html but I just can’t fix it.

This is my CSS Styling and Component:

html, body {
  height: 100%;
  margin: 0;
  height: 100%;
}

:focus { outline: 0; }

#root, .App {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  margin: 0;
}

.Field {
  position: relative;
  padding-bottom: 24px;
  display: flex;
  flex-direction: column;
}

.FieldError {
  position: absolute;
  bottom: -6px;
  color: red;
  font-size: 12px;
}

button {
  padding: 12px;
  width: 240px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: darkblue;
  color: white;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}

button:disabled,
button[disabled] {
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
}

.Registration {
  width: 645px;
  background: #FFF;
  box-shadow: 0px 4px 17px 0px rgba(0, 0, 0, 0.30);
}

import { useState } from "react";
import { validateEmail } from "./utils";

const PasswordErrorMessage = () => (
  <p className="FieldError">Das Passwort sollte mindestens 8 Zeichen haben</p>
);

const ConfirmPasswordErrorMessage = () => (
  <p className="FieldError">Die Passwörter stimmen nicht überein</p>
);

const EmailErrorMessage = () => (
    <p className="FieldError">Bitte gib eine gültige Email-Adresse ein</p>
  );

const RegistrationForm = () => {
  const [firstName, setFirstName] = useState("");
  const [gender, setGender] = useState("");
  const [birthday, setBirthday] = useState("");
  const [email, setEmail] = useState({
    value: "",
    isValid: true,
    isTouched: false,
  });
  const [password, setPassword] = useState({
    value: "",
    isTouched: false,
  });
  const [confirmPassword, setConfirmPassword] = useState({
    value: "",
    isTouched: false,
  });

  const getIsFormValid = () => {
    return (
      firstName &&
      email.isValid &&
      validateEmail(email.value) &&
      password.value.length >= 8 &&
      confirmPassword.value === password.value
    );
  };

  const clearForm = () => {
    setFirstName("");
    setGender("");
    setBirthday("");
    setEmail("");
    setPassword({
      value: "",
      isValid: true,
      isTouched: false,
    });
    setConfirmPassword({
      value: "",
      isTouched: false,
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (getIsFormValid()) {
      alert("Account created!");
      clearForm();
    } else {
      alert("Bitte überprüfen deine Eingaben.");
    }
  };

  return (
    <div class="Registration">
      <form onSubmit={handleSubmit}>
        <fieldset>
          <h2>Registrierung</h2>
          <div className="Field">
            <label>Nutzername<sup>*</sup></label>
            <input
              value={firstName}
              onChange={(e) => setFirstName(e.target.value)}
              placeholder="Nutzername"
            />
          </div>
          <div className="Field">
            <label>Geschlecht</label>
            <select value={gender} onChange={(e) => setGender(e.target.value)}>
              <option value="">Geschlecht auswählen</option>
              <option value="männlich">Männlich</option>
              <option value="weiblich">Weiblich</option>
              <option value="divers">Divers</option>
              <option value="keine Angabe">Möchte ich nicht angeben</option>
            </select>
          </div>
          <div className="Field">
            <label>Geburtsdatum</label>
            <input
              type="date"
              value={birthday}
              onChange={(e) => setBirthday(e.target.value)}
            />
          </div>
          <div className="Field">
            <label>Email-Adresse<sup>*</sup></label>
            <input
              value={email.value}
              onChange={(e) => setEmail({
                ...email,
                value: e.target.value,
                isValid: validateEmail(e.target.value),
              })}
              onBlur={() => setEmail({ ...email, isTouched: true })}
              placeholder="Email-Adresse"
            />
            {email.isTouched && !email.isValid && <EmailErrorMessage />}
          </div>
          <div className="Field">
            <label>Passwort<sup>*</sup></label>
            <input
              value={password.value}
              type="password"
              onChange={(e) => setPassword({ ...password, value: e.target.value })}
              onBlur={() => setPassword({ ...password, isTouched: true })}
              placeholder="Passwort"
            />
            {password.isTouched && password.value.length < 8 && <PasswordErrorMessage />}
          </div>
          <div className="Field">
            <label>Passwort bestätigen<sup>*</sup></label>
            <input
              value={confirmPassword.value}
              type="password"
              onChange={(e) => setConfirmPassword({ ...confirmPassword, value: e.target.value })}
              onBlur={() => setConfirmPassword({ ...confirmPassword, isTouched: true })}
              placeholder="Passwort bestätigen"
            />
            {confirmPassword.isTouched && confirmPassword.value !== password.value && <ConfirmPasswordErrorMessage />}
          </div>
          <button type="submit" disabled={!getIsFormValid()}>
            Konto erstellen
          </button>
        </fieldset>
      </form>
    </div>
  );
};

export default RegistrationForm;