CSS flexbox

Class selectors style elements with a specific class attribute. They use a period (.) followed by the class name. CSS specificity determines which rules are applied when multiple rules could match the same element. The higher the specificity, the more important the CSS rule.

Here’s the order of specificity from highest to lowest:

Inline Styles: Applied directly to the element. (Try to avoid using inline styles unless necessary for styled components.)

ID Selectors: Applied to elements with a specific ID. (Try to avoid using IDs for styling as much as possible due to high specificity.)

Class, Attribute, and Pseudo-class Selectors: Applied to elements with a specific class, attribute, or state (e.g., :hover). (Use these for most styling.)

Element and Pseudo-element Selectors: Applied to elements or parts of elements (e.g., p tag, ::before). (Use these for general styling.)

Hope this helps!

Best, Teodor

To make the image the size that you want I encourage you to use this technique to make the card responsive with ease:

.card {
width: 90%;
max-width: 600px;
}

On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 600px it will lock with this size.

Also to put the card in the center I advise you to use this code snippet:

.container {
display: grid;
place-items: center;
}

Hope you found this comment helpful 💗💗💗

Good job and keep going 😁😊😉