Как я могу удалить нежелательную рамку вокруг моего контейнера div? ⇐ CSS

[Гость]

Я создал очень простую регистрационную форму с помощью React JS. Я все оформил так, как хотел, но не могу удалить странную серую рамку вокруг моей регистрационной формы.
Я уже пробовал интегрировать глобальный CSS-файл и удалить рамку из тела формы. html, но я просто не могу это исправить.
Это мой стиль и компонент CSS:

Код: Выделить всё

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 = () => (
Das Passwort sollte mindestens 8 Zeichen haben
);

const ConfirmPasswordErrorMessage = () => (
Die Passwörter stimmen nicht überein
);

const EmailErrorMessage = () => (
Bitte gib eine gültige Email-Adresse ein
);

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 (



Registrierung

Nutzername*
 setFirstName(e.target.value)}
placeholder="Nutzername"
/>

Geschlecht
  setGender(e.target.value)}>
Geschlecht auswählen
Männlich
Weiblich
Divers
Möchte ich nicht angeben


Geburtsdatum
 setBirthday(e.target.value)}
/>

Email-Adresse*
 setEmail({
...email,
value: e.target.value,
isValid: validateEmail(e.target.value),
})}
onBlur={() => setEmail({ ...email, isTouched: true })}
placeholder="Email-Adresse"
/>
{email.isTouched && !email.isValid && }

Passwort*
 setPassword({ ...password, value: e.target.value })}
onBlur={() => setPassword({ ...password, isTouched: true })}
placeholder="Passwort"
/>
{password.isTouched && password.value.length < 8 && }

Passwort bestätigen*
 setConfirmPassword({ ...confirmPassword, value: e.target.value })}
onBlur={() => setConfirmPassword({ ...confirmPassword, isTouched: true })}
placeholder="Passwort bestätigen"
/>
{confirmPassword.isTouched && confirmPassword.value !== password.value && }


Konto erstellen




);
};

export default RegistrationForm;

Источник: https://stackoverflow.com/questions/781 ... -container