why is the auto top margin moving the button down?

Hi 2pd, The key to your question is that the item, in this case the button, needs to be a (flex item), then when you apply margin-top: auto; to your button it will take up all the (space available) around itself therefore pushing the item to the bottom of the box, just like you would use margin-left: auto; and margin-right: auto; it centers the item, but if you take away margin-left: auto; the item will move all the way to the left of the container it's in, I recommend watching the video again, also try using the code in different scenarios to understand it better.

Happy coding, Cheers!

You can set the margin property to auto to horizontally center the element within its container.