How can align my text from center to left? - html

Question

I am designing a simple signup form using Html and CSS. I just want to " already have an account ? Log in" text to left till the border of skyblue border, butI am unable to do that.
But I am getting result
Here is my html code
<div class="register-bg">
<div class="register-container">
<form>
<label for="email"><b>Email</b></label>
<input
type="text"
placeholder="Enter Email"
name="email"
required=""
/>
<label for="password"><b>Password</b></label>
<input
type="password"
placeholder="Enter Password"
name="password"
required=""
/>
<button type="submit" class="signup">Sign Up</button>
<Link>
<h1 class="register-login">
alredy have an account ? Log in
</h1>
</Link>
</form>
</div>
</div>
Here is my css code
.register-bg{
height: 100vh;
background-size: cover;
width: 100%;
background-image: url(../public/images/bg.jpg);
}
.register-container{
margin-top: 100px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
width: 70%;
margin-left:27rem;
background: rgb(53, 105, 46);
align-items: center;
justify-content: center;
padding: 50px 0;
}
.register-container > form{
background:skyblue;
display: flex;
flex-wrap: wrap;
flex-direction: column;
width: 70%;
justify-content: center;
align-items: center;
}
.register-container input{
width: 80%;
font-size: 15px;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
text-align: center;
border: none;
background: #f1f1f1;
}
.register-login {
color: black;
font-size: 15px;
}
.signup{
align-items: center;
font-size: 14px;
font-weight: bold;
background-color: rgb(10, 119, 13);
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
opacity: 0.9;
}

Answer 1

Just add this to your CSS:
.register-login {
align-self: flex-start;
}

Answer 2

Wrap your <Link> in a div container
<div class="login-text-container">
<Link>
<h1 class="register-login">
alredy have an account ? Log in
</h1>
</Link>
</div>
Wet its width to 100%
.login-text-container {
width: 100%;
}
Full code:
.register-bg {
height: 100vh;
background-size: cover;
width: 100%;
background-image: url(../public/images/bg.jpg);
}
.register-container {
margin-top: 100px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
width: 70%;
margin-left: 27rem;
background: rgb(53, 105, 46);
align-items: center;
justify-content: center;
padding: 50px 0;
}
.register-container>form {
background: skyblue;
display: flex;
flex-wrap: wrap;
flex-direction: column;
width: 70%;
justify-content: center;
align-items: center;
}
.register-container input {
width: 80%;
font-size: 15px;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
text-align: center;
border: none;
background: #f1f1f1;
}
.register-login {
color: black;
font-size: 15px;
}
.signup {
align-items: center;
font-size: 14px;
font-weight: bold;
background-color: rgb(10, 119, 13);
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
opacity: 0.9;
}
.login-text-container {
width: 100%;
}
<div class="register-bg">
<div class="register-container">
<form>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required="" />
<label for="password"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="password" required="" />
<button type="submit" class="signup">Sign Up</button>
<div class="login-text-container">
<Link>
<h1 class="register-login">
alredy have an account ? Log in
</h1>
</Link>
</div>
</form>
</div>
</div>

Answer 3

add the following code, edit it and you are good to go :)
CSS:
.login-button {
display: block;
padding: 100%;
align-items: left;
}
HTML:
<div class='login-button'>
<h1 class="register-login">
alredy have an account ? Log in
</h1>
</div>