justify content won't align left - html

Question

I'm practicing CSS/flexbox reproducing the login page of instagram but i'm facing a issue with horizontal alignment that i can't figure out what's wrong.
There's two major containers inside one big wrapper ("instagram-wraper" - each one get 50% of the width of that wraper).
Container 1 (left): "cellphone-img" that contain only a cellphone img
Container 2 (right): "account-info-container" that contain all the login inputs, subscribe, and so on.
The image on the left side work as intended, but what i'm trying to do is to align all the content in the account-info-container to the left with justify-content, essentially putting the image and the login containers side by side, but it doesn't work. What am i missing? (bet it's something simple...)
Thanks in advance.
PS: I didn't work on the responsiveness yet.
/* General settings */
* {
margin: 0;
padding: 0;
text-decoration: none;
box-sizing: border-box;
text-decoration: none;
font-family: "Roboto";
}
body {
width: 100%;
min-height: 100vh;
background-color: rgb(243, 243, 243);
font-size: 14px;
}
.flex-container {
display: flex;
/* max-width: 1200px; */
margin: auto;
width: 100%;
}
/* Wrapper img + wrapper login */
.instagram-wrapper {
align-items: center;
width: 60%;
height: 85vh;
}
/* Cellphone img container */
.cellphone-img {
display: flex;
align-items: center;
justify-content: flex-end;
width: 50%;
/* margin-left: 150px; */
}
.cellphone-img img {
height: 630px;
width: auto;
}
/* Login + subscribe + ap-downloads */
.account-info-container {
display: flex;
align-items: center;
flex-direction: column;
justify-content: flex-start;
width: 50%;
/* margin-right: 150px; */
}
/* Login wrapper */
.login-container {
flex-direction: column;
height: 420px;
width: 70%;
border: 1px solid rgba(var(--b6a, 219, 219, 219), 1);
background-color: #fff;
}
.insta-logo {
width: 100%;
display: flex;
justify-content: center;
padding-top: 55px;
padding-bottom: 35px;
}
/* Login inputs container */
.login {
align-items: center;
flex-direction: column;
}
.login input {
width: 85%;
height: 36px;
background-color: rgba(var(--b3f, 250, 250, 250), 1);
border: 1px solid rgba(var(--ca6, 219, 219, 219), 1);
border-radius: 3px;
font-size: 13px;
padding-left: 8px;
}
.input-login {
margin-bottom: 10px;
}
.input-password {
margin-bottom: 20px;
}
.login-btn {
width: 85%;
background-color: rgba(var(--d69, 0, 149, 246), 1);
border: 1px solid transparent;
border-radius: 4px;
color: #fff;
font-size: 14px;
padding: 5px 9px;
cursor: pointer;
font-weight: 600;
box-sizing: border-box;
}
.or-ruler {
width: 85%;
color: rgba(var(--f52, 142, 142, 142), 1);
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
margin-top: 20px;
}
.or-ruler::before {
content: "";
width: 120px;
height: 1px;
background-color: rgba(var(--ca6, 219, 219, 219), 1);
}
.or-ruler::after {
content: "";
width: 120px;
height: 1px;
background-color: rgba(var(--ca6, 219, 219, 219), 1);
}
.facebook-login-btn {
width: 85%;
color: #385185;
background-color: transparent;
border: none;
cursor: pointer;
margin: 30px auto;
display: flex;
justify-content: center;
}
.facebook-login-btn img {
width: 17px;
height: auto;
margin-right: 5px;
}
.forget-pass-link {
font-size: 12px;
cursor: pointer;
padding-bottom: 40px;
color: #00376b;
}
/* Subscribe container */
.subscribe {
align-items: center;
justify-content: center;
border: 1px solid rgba(var(--b6a, 219, 219, 219), 1);
background-color: #fff;
height: 70px;
width: 70%;
margin-top: 10px;
margin-bottom: 30px;
}
.subscribe p a {
font-weight: 600;
color: rgba(var(--d69, 0, 149, 246), 1);
}
/* Apps download wrapper */
.app-download {
align-items: center;
flex-direction: column;
width: 70%;
}
.app-imgs {
display: flex;
width: 100%;
justify-content: space-around;
}
.app-imgs img {
width: 170px;
height: auto;
padding-top: 30px;
}
/* Footer */
.footer-section {
max-width: 60%;
height: 100px;
margin: auto;
margin-bottom: 200px;
}
footer {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 12px;
}
footer div {
margin: 8px auto;
}
footer a {
margin: auto 10px;
color: rgba(var(--f52, 142, 142, 142), 1);
text-decoration: none;
}
<div class="instagram-wrapper flex-container">
<div class="cellphone-img">
<img src="./images/instagram-celular2.png" alt="instagram cellphone" />
</div>
<div class="account-info-container">
<div class="login-container flex-container">
<div class="insta-logo">
<img src="./images/instagram-logo.png" alt="instagram-logo" />
</div>
<div class="login flex-container">
<input class="input-login" type="text" placeholder="Telefone, nome do usuário ou email" />
<input class="input-password" type="text" placeholder="Senha" />
<button class="login-btn">Entrar</button>
<div class="or-ruler">
<span> OU <span>
</div>
<button class="facebook-login-btn">
<span><img src="./images/fb-icon.png" alt="" /></span>
<span>Entrar com o Facebook</span>
</button>
<a class="forget-pass-link" href="">Esqueceu a senha?</a>
</div>
</div>
<div class="subscribe flex-container">
<p>Não tem uma conta? Cadastre-se</p>
</div>
<div class="app-download flex-container">
<p>Obtenha o aplicativo.</p>
<div class="app-imgs">
<img src="./images/apple-button.png" alt="appstore-img" />
<img src="./images/googleplay-button.png" alt="googleplay-img" />
</div>
</div>
</div>
</div>
<section class="footer-section">
<footer>
<div>
Meta
About
Blog
Jobs
Help
API
Privacy
Terms
Top Accounts
Hashtags
Locations
Instagram Lite
Contact Uploading & Non-Users
</div>
<div>
Dance
Food & Drink
Home & Garden
Music
Visual Arts
</div>
<div>
English
© 2022 Instagram from Meta
</div>
</footer>
</section>

Answer 1

If both of your items inside the container are each 50% width, they won't move horizontally—they're spanning across the entire container; there's no free space (and justify-content works by distributing free space).
Remove the width: 50% rule and work on each item individually (using width, margin and/or flex properties).
Also, the justify-content property doesn't take left and right values. They're invalid. Here are the values that work.
Finally, when you're ready to pin both items to the left, consider flex auto margins.