I'm having trouble aligning all the elements in the center of my login form created with HTML and Bootstrap. The header appears to be center-aligned, but it is not vertically aligned with the other elements. I've been using the Grid system and need the elements to be center-aligned on medium and small screens. Despite trying to utilize the 12-column grid logic to reach the center, the alignment is still off.
Additionally, I'm unable to achieve the desired rounded corners for the login form. While CSS works, it applies the radius to all divs, which isn't what I want.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fe9c91919a9d9a9c8eacb1b6a7b8a7ba">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" >
<title>Social Network</title>
</head>
<body class="bg-primary">
<div class="row">
<div class="col-3 col-md-6"></div>
<header class="text-center fs-3 text-white my-5">
SOCIAL NETWORK
</header>
</div>
<div class="row">
<div class="col-2 col-md-4 m-1"></div>
<div class="rounded-3 text-center bg-light p-4 col-centered col-8 col-md-3 px-5">
<div>
<input type="email" class="form-control my-5" id="inputUsername" aria-describedby="emailHelp" placeholder="Username">
<input type="password" class="form-control my-5" id="inputPassword1" placeholder="Password">
</div>
<div class="text-center">
<button type="submit my-5" class="btn btn-primary">Log In</button>
</div>
<div class="text-center my-4 text-secondary">OR</div>
<div class="text-center">
<a class="text-decoration-none link-secondary" href="">Forgot Password?</a>
</div>
</div>
<div class="col-md-3"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
</div>
<div class="row">
<div class="col-1 col-md-3"></div>
<div class="col-1 col-md-1"></div>
<div class="text-center text-secondary rounded-pill col-8 col-md-3 bg-light my-4 py-3" id="signUp">
<div class="text-centered">Don't have an account? <a class="text-primary px-3" href="">Sign Up</a></div>
</div>
<div class="col-1 col-md-3"></div>
<div class="col-md-2"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="690b060617101717051727220305161b163b1a07000f12">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>