CSS Text-Container отображается в строке вместо столбцов ⇐ Html

[Anonymous]

Я не могу понять, почему текстовое поле справа от изображения отображается в рядах вместо столбцов
(вторая кнопка больше не требуется. /> Изображение того, как он должен выглядеть: < /p>
Как это должно выглядеть < /p>

Код: Выделить всё

@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%;
}
}< /code>


Rehome Your Dog with Compassion
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.

[url=https://www.happypaws.com/surrenderform]Submit a surrender request[/url]



[img]img[/img]

Я сначала решил, как положить картинку и текстовый контейнер рядом, но затем она испортила сетку вещей внутри коробки.

Подробнее здесь: https://stackoverflow.com/questions/794 ... of-columns