why images are going off the page, and no other content is

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;
}