Login Screen Issue

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="css/fb_script.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Facebook</title>

</head>

<body>

    <h1>
        test header in h1
    </h1>






    <div class="login_screen">

        <img src="https://i.ibb.co/3SZ1R5h/loremipsum.png" alt="Logo">



        <p>Zur Anmeldung</p>

        <input type="text" placeholder="E-Mail">

        <input type="password" placeholder="Passwort">

        <button> <a href="#">Anmelden</a></button>

    </div>






</body>
<br>
</html>

CSS

body {
    background-color: rgb(0, 0, 50);
    color: #1877F2;
    font-weight: 800;
    font: 1em sans-serif;
    padding-left: 100px;
    padding-right: 100px;

}

a{
    text-decoration: none;

}


h1 {
    text-transform: uppercase;
    text-align: center;
    margin-top: 32px;
    font-size: 20px;

}
.login_screen{

    padding: 16px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    display: inline-block;

}

.login_screen > img{

    float: left;
    min-width: 250px;
    max-width: 250px;
}
    
.login_screen > p{

    text-align: center;
    color: #1877F2;
}

.login_screen > input {
    align-items: center;
    margin: 4px 0 4px 15%;
    border-radius: 5px;
    border-width: 5px;
    border-color: #1877F2;
    border-style: solid;
}

.login_screen > button{
    align-items: center;
    margin: 4px 0 4px 15%;
    width: 180px;
    color: #141313;
    background-color: #1877F2;
    font: 1em sans-serif;
    font-weight: bold;
    border-radius: 5px;
    border-style: solid;

}