I can't figure out on why the text box to the right of the picture is displayed in rows instead of columns
(The second button isn‘t necessary anymore. :))
Image may be NSFW.
Clik here to view.
Picture of what it is supposed to look like:
@import url('https://fonts.googleapis.com/css2?family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap');:root { --ff: 'Sour Gummy', cursive; --color-primary: hsl(230, 50%, 90%); --color-primaryheader: hsl(230, 50%, 85%); --color-secondary: hsl(230, 50%, 10%); --color-tertiary: hsl(290, 80%, 20%); --color-accent: hsl(170, 80%, 20%); --h1: bold 64px/72px var(--ff); --h2: bold 48px/56px var(--ff); --p: 24px/32px var(--ff);}body { margin: 0; background-color: var(--color-primary); color: var(--color-secondary); font: var(--p);}.content { max-width: 1280px; margin: 100px; display: flex; flex: 1; gap: 40; align-items: center;}.text-content { display: flex; flex-direction: column; flex: 1;}.primary-btn { background: var(--color-accent); color: var(--color-primary); padding: 20px 40px; text-decoration: none; font-weight: bold; border-radius: 10px;}img { width: 100%; height: auto;}/* Media query to adjust layout for smaller screens */@media (max-width: 800px) { .content { flex-direction: column; } .text-content, .image-content { min-width: 100%; }}<div class="content "><div class="text-content"><h1>Rehome Your Dog with Compassion</h1><p>At Happy Paws, we understand that sometimes, due to unforeseen circumstances, families can no longer care for their beloved dogs. We are here to help ensure your pet finds a safe and loving new home. </p><div class="button-container"><a class = "primary-btn" href="https://www.happypaws.com/surrenderform">Submit a surrender request</a></div></div><div class="image-content"><img src="img's/t-r-photography-TzjMd7i5WQI-unsplash.jpg" alt=""></div></div>I first figured how to put the pic and the text-container side by side but then it messed up the grid of the things inside the box.
