html - 为什么图像离开了页面，而没有其他内容

Question

我有一个部分是所有 p 和 img 元素，它们都排在同一个地方，但是 img 会离开屏幕而 p 不会。我的 body css 中有 box-sizing:border-box，我尝试添加 justify content 和 align items，我添加了 width:100% 和 overflow:auto，但似乎都无法修复它，不确定我搞砸了什么。感谢您的任何帮助。我还应该提到它主要是我试图让它工作的一个较小的移动窗口，因为我有针对较大屏幕的媒体查询。

#story{
	background: linear-gradient(#4B7992, #090D19);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	
}

#story h1{
	flex:100%;
	padding:30px 0px;
}
	
#story h2{
	background: #4B7992;
	padding: 20px 15px 30px;
	text-align: center;
	
}

#story img{
	padding: 30px 80px 20px;
	width: 100%;
	overflow: auto;
}

#story p {
	padding:15px 80px 16px;
	line-height: 30px;
}

<section id="story">
		
		<h1>THE STORY</h1>
		
		<h2>From the creators...</h2>
		
		<article>
		
			<img src="images/story1.png" alt="Story 1">

			<p>Based on ....</p>

			<img src="images/story2.jpg" alt="Story 2">

			<p>More....</p>

			<img src="images/story3.png" alt="Story 3">

			<p>End...</p>
		</article>
	</section>

Answer 1

将您的 #story img width 更改为 calc() 值以适应将其推过的 80 像素填充。

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