Bei CSS "display: flex;" wird alles schief warum?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<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>Login</title>
<!-- stylesheet -->
<link rel="stylesheet" href="styles.css">
<!-- Boostrap Icon -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" />
</head>
<body>
<div class="container">
<!-- Create Account -->
<div class="sign-up">
<div class="sign-up-container">
<h3>Create account</h3>
<div class="cs-form-group">
<label for="Email">Email</label>
<input type="email" class="cs-form-control">
</div>
</div class="cs-form-group">
<label for="password">Password</label>
<input type="password" name="" id="" class="cs-form-control">
</div>
<div class="cs-form-control">
<button class="cs-form-submit">Create Account</button>
</div>
<span class="divider"></span>
<div class="cs-form-group">
<button class="social-login">
<span class="social-icon">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Google_%22G%22_logo.svg/2048px-Google_%22G%22_logo.svg.png" alt="" style="width: 20px;">
</span>
Create using Google Account
</button>
</div>
<p>Already have an account?<a href="#"> Login</a></p>
</div>
</div>
<!-- Login -->
<div class="login">
</div>
<!-- Forgot Password -->
<div class="forget-password">
</div>
</div>
</body>
</html>
CSS:
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
*{
box-sizing: border-box;
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container{
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: #F5F5F5;
}
.sign-up{
position: relative;
padding: 10px;
width: 420px;
}
.sign-up-container{
position: relative;
background: #F5F5F5;
padding: 24px 20px;
border: 1px solid #D4D5D8;
box-shadow: 0px 1px 2px rgba(152, 152, 152, 0.2);
}
.sign-up-container h3{
font-size: 28px;
font-weight: 800;
margin-bottom: 8px;
}
.cs-form-group{
display: block;
}
HTML,
Webseite,
CSS,
Code,
Programmiersprache,
Webdesign
