cannot center images in grid in css

Question

I've been trying to complete this challenge project for Web Dev on Codecademy and I'm stuck on trying to center images in a grid. I've tried to use justify-content and justify-items in just about every selector within the grid and the grid container itself and cannot figure out what is wrong.

/* Services */

.services-title {
  text-align: center;
  margin-bottom: 0;
}

.services {
  display: flex;
}

.image-container {
  display: grid;
  grid-template-areas: 'img-1 img-2' 'img-3 img-4';
  padding: .5rem;
  justify-items: center;
}

.image-container h3 {
  background-color: #c4a77d;
  color: #313715;
  /* padding: 2rem 0; */
  font-size: 1.45rem;
}

.img-1,
.img-2,
.img-3,
.img-4 {
  margin: 1%;
  background-color: #c4a77d;
  opacity: .75;
  align-content: center;
}

.services img {
  border: 2px solid #313715;
  border-radius: 5px;
  width: 90%;
  justify-items: center;
}

.services h2 {
  text-align: center;
}

  <h2 class="services-title">Our Services</h2>
  <div class="services" id="services">
    <div class="image-container">
      <div class="img-1">
        <h3>Herbal Mixes</h3>
        <img src="img-1" alt="alt">
      </div>
      <div class="img-2">
        <h3>Spelled Candles</h3>
        <img src="img-2" alt="alt">
      </div>
      <div class="img-3">
        <h3>Herbal Tinctures</h3>
        <img src="img-3" alt="alt">
      </div>
      <div class="img-4">
        <h3>Organic Herbs</h3>
        <img src="img-4" alt="alt">
      </div>
    </div>
  </div>

Answer 1

I hope you are talking about images in the section "Our Services." So if that is so then change this CSS code only like below:

.img-1,
.img-2,
.img-3,
.img-4 {
    margin: 1%;
    background-color: #c4a77d;
    opacity: .75;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

Hope this helps!