margin auto query

Hey, in this example, i'm aligning the button on the card to the right side. I have a few questions regarding the methods to do so.

1) On the first card, a simple margin-left: auto; wont work, however when flex or grid is applied to the parent as seen on the second card it does, why is this the case?
2) By using a method other than applying flex or grid to the parent, as seen on the third card, the text wraps, what causes this behaviour?

I'd appreciate and value any insight so i can understand how things work more, thanks in advance!

https://codepen.io/deerCabin/pen/qBwymYe
CodePenR
...
margin query
Was this page helpful?