Why are my containers so large and not shrinking down to fit the width of the page?

I’m working on the Fotomatic project and I’m having trouble getting the photos in the ‘features section’ to shrink down to the right size. Here are the specs for the project. The photo’s dimensions are set to height: 65% and width: 90%, which should adjust to it’s parent container? I feel like the issue is the parent container is the ‘center’ div, and not the ‘feature’ div. This is a head scratcher for me!

Also, this is my first post, so not sure exactly how to share my code properly. Thanks so much for any help!!

Here is the HTML and CSS:

<div id="features-section">
  <div class="feature">
    <div class="center">
      <div class="image-container">
        <img src="./resources/images/feature-1.png" />
      </div>
      <div class="content">
        <h2>Advanced, automatic, instant</h2>
        <h3>Shutter speed, apperture and flash output adjust automatically</h3>
      </div>
    </div>
  </div>
  <div class="feature">
    <div class="center">
      <div class="image-container">
        <img src="./resources/images/feature-2.png" />
      </div>
      <div class="content">
        <h2>Beautifully crafted inside-out</h2>
        <h3>From the paint outside to the tiny screw inside, Fotomatic is crafted with love and 20-year of expertise</h3>
      </div>
    </div>
  </div>
</div>

/* Features Section */
#features-section {
display: flex;
justify-content: space-between;
padding: 4rem 5%;
background-color: #f3f3f3;
}

.feature {
flex: 1;
padding: 2rem;
margin: 0px 1.25rem;
background-color: white;
height: 635px;
}

.feature .image-container {
width: 90%;
height: 65%;
margin: 0 auto;
}

.feature h2 {
padding-bottom: .5rem;
font-size: 2.25rem;
font-weight: bold;
color: #4a4a4a;
}

.feature .content {
height: 187px;
margin-top: 40px;
}

.feature h3 {
font-size: 1rem;
line-height: 1.2;
font-weight: 300;
color: #4a4a4a;
}

What’s your code for the .image-container img selector? (Hint: the .image-container won’t actually limit the image’s size if there is no css code limiting the image’s height or width).

Here's the CSS to shrink your img within it's container
.image-container img {
    display: block;
    width: 100%;
}