@rrebolledo90
Posted
Greetings, after looking over your code on dev-tools I marked some suggestions for you. I noticed that you used position-absolute to center your container. However, one easy way to center your container is to use the margin: 0 auto trick (as you can see below, this gives you the same results as using position-absolute and transform:translate).
Container {
margin: 0 auto;
display: flex;
flex-direction: column;
width: 350px;
border-radius: 40px;
background-color: hsl(0, 0%, 100%);
}
Now, another reason why you can't move your container down is because you donβt have enough height on your parent element (in this case main being the direct parent). If you add the following it moves your container down.
Main {
height : 100vh;
Display: flex;
Align-items: center;
}
Hope this helps.
Marked as helpful
@Emmanuel-Afrifa
Posted
@rrebolledo90 Thank you very much