Html 背景图像不工作的响应div

我有一个div容器，其中有两个具有背景图片的div。我设置了div容器显示网格的样式，并修复了一个div大于另一个div的问题。我希望div堆叠在顶部（或宽度为100%），以获得小屏幕尺寸。想让它响应，但不起作用。在原始代码中，我使用了更多div。这里我只包括两个

#主{
高度：300px；
显示：网格；
网格模板列：自动；
}
.sub{
背景色：卡德蓝；
利润率：10px；
}
#一个{
网格列开始：1；
网格柱端：3；
背景图像：url（“https://image.shutterstock.com/image- 
vector/floral-seamless-pattern-leaves-cordelia-600w-1142315438.jpg”）；
}
#两个{
背景图片：url(https://image.shutterstock.com/image- 
照片/彩色-花-暗-热带-600w-721703848.jpg）
}
@媒体屏幕和屏幕（最大宽度：600px）{
#一,，
#两个{
宽度：100%；
}
}

1.
2

尝试将媒体查询修改为以下内容：

@media screen and (max-width: 600px) {
    #main {
        grid-template-columns: auto;
    }

    #one {
        grid-column-end: 2;
    }
}

---

我会使用flex box，我认为它更容易使用。如果不想让它们堆积在更大的屏幕上，只需添加一个媒体查询，并将flex direction更改为row

正文{
保证金：0；
填充：0；
}
.sub{
宽度：100%；
高度：500px；/**可以是您想要的任何高度**/
背景颜色：蓝色；
边缘顶部：20px；
背景图像：url（“https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/suburban-house-royalty-free-image-1584972559.jpg?resize=980:*");
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
}
梅因先生{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}

---

这项工作很好。只需从url中删除空格