This is my very first project here and I am happy I did it.
I made use of CSS transform property for the first time to center the element.
Sincerely, I do not really know why it had that effect. I'd be happy to get some helpful feedback on that.
Thank You :)
Hi, when you used left: 50% you moved #main-container 50% length of <body> to the right, so it is not centered because all #main-container is to the right of <body>.
In order to solve that you used transform: translate(-50%, 0%), it moves #main-container 50% of its width to the right, so now half of it is to the left of <body> and half of it to the right of <body>
To check more about the positioning properties check here:
https://developer.mozilla.org/en-US/docs/Web/CSS/position
For translate function check here:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate
Also, margin: 0 auto does not work in absolute positioned elements.
◦ Positioning the elements at the center was a bit tasking.
◦ I am not sure I got the positioning spot on.
◦ Is there a better way to position elements?