Html 为什么图像会离开页面，而没有其他内容

我有一个部分是所有的p和img元素，他们都在同一个地方排列，但img会离开屏幕，而p不会。我在我的主体css中加入了框大小：边框框，我尝试添加了对齐内容和对齐项，我添加了宽度：100%和溢出：自动，但似乎都无法修复，我不确定我搞砸了什么。谢谢你的帮助。我还应该提到的是，这主要是一个较小的移动窗口，我正试图使其工作，因为我有媒体查询更大的屏幕

#故事{
背景：线性梯度（#4B7992，#090D19）；
显示器：flex；
柔性包装：包装；
对齐项目：居中；
证明内容：中心；
}
#故事h1{
弹性：100%；
填充：30px 0px；
}
#故事h2{
背景：#4B7992；
填充：20px 15px 30px；
文本对齐：居中；
}
#故事img{
填充：30px 80px 20px；
宽度：100%；
溢出：自动；
}
#故事p{
填充：15px 80px 16px；
线高：30px；
}

故事
从创造者那里。。。
基于

更多

结束

将您的#故事img width更改为calc（）值，以适应推动它的80px填充

#story img{
    padding: 0px 80px 0px;
    width: calc(100% - 80px);
    overflow: auto;
}

---

尝试将img宽度设置为自动。您还可以尝试设置overflow，以将示例中的图像替换为基于url的占位符图像，以便其他人可以看到效果。示例：