Creating a playing card
Briefly

To place smaller text beneath larger text, ensure that your paragraph tags (e.g., .hr1 for larger and .hr2 for smaller) are nested correctly within a wrapping div.
The margin property, which was incorrectly specified in the code snippet provided, should be zero. This helps to control the spacing around the elements, ensuring proper alignment.
When structuring your HTML, using flexbox (with flex-direction set to column) allows for easier manipulation of layout, especially when stacking multiple text elements.
If you intend to overlay text on an image, setting the image as a background allows text to show above without needing additional layout adjustments.
Read at SitePoint Forums | Web Development & Design Community
[
|
]