为什么图像从页面上消失，而没有其他内容

Question

I have a section that is all p and img elements, they both line up at the same place, but the img will go off screen while the p does not. I have box-sizing:border-box in my body css, I've tried adding justify content and align items, I've added the width:100% and overflow:auto, and none of it seems to fix it, not sure what I am messing up. Thank you for any help. I should also mention it is mainly a smaller mobile window I am trying to make this work for, as I have media queries for larger screens.

 #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

Change your #story img width to a calc() value to accommodate for the 80px padding that is pushing it over.

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