I'm attempting to reposition the sign-up buttons for Google, Apple, and email below where it says "join," but they stubbornly refuse to budge even when I try to force them with CSS.
https://i.sstatic.net/74LQk.jpgCSS
.homepage_topRight_Buttons{
display: flex;
flex-direction: column;[](https://i.sstatic.net/EZa1Q.png)
align-items: flex-start;
}
.homepage_topRight_Buttons h3{
margin-left:90%;
margin-top: -10rem;
}
.homepage_topRight_Buttons button{
width: 19rem;
margin-bottom: 1rem;
}
.homepage_topRight_policies {
width: 20rem;
margin-left:56%;
margin-right: 21rem;;
margin-top: -0.23rem;
font-size: 0.7rem;
color: var(--grey-2);
}
.homepage_topRight_policies a {
color: var(--bomber-primary);
text-decoration: none;
}
React
<div className="row justify-content-center offset-7">
<div className="homepage_topRight_Buttons mb-5 col-xl-12 col-l-12 col-md-7 col-sm-9 col-xs-8 d-flex align-items-center ">
<button className="primary_button">Sign up with Google</button>
<button className="primary_button">Sign up with Apple</button>
<button className="secondary_button">
Sign up with phone or email
</button>
<p className="homepage_topRight_policies">
By signing up, you agree to the <a href="/">Terms of Service</a> and{""}
<a href="/">privacy Policy</a>, including{""}
<a href="/">cookie Use.</a>
</p>
</div>
</div>
I've tried using margin-top without success, as well as align-end which had no effect. Modifying the CSS file with margin-top moved the buttons, but unfortunately disabled their functionality.