How to align images using CSS grid?

Question

I'm trying to build part of a website using CSS Grid. I'm trying to get the list and image to stay on the same line and scale down/grow when the screen size changes. The code is pasted below. Any help is greatly appreciated.

I want to know if the error is within my grid template.

.pm {
  display: inline-grid;
  max-width: 100%;
  position: relative;
  margin: auto;
  grid-template-areas: "title title" "list picture" "options options" "paragraph paragraph";
  grid-template-rows: 10% 1fr 20% 10%;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.pm h2 {
  grid-area: title;
  text-align: center;
}

.pm .container ul {
  grid-area: list;
}

.pm .container img {
  grid-area: picture;
  max-width: 30%;
  border-radius: 0.25em;
}

.pm .options {
  grid-area: options;
}

.pm .paragraph {
  grid-area: paragraph;
}

<div class="pm section">
  <h2>Preventative Maintenance:</h2>
  
  <div class="container">
    <ul>
      <li>Calibration of each piece of equipment as required.</li>
      <li>Inspect any switches, controls and/or electrical components.</li>
      <li>Inspect motor brushes and clean the motor fan vents.</li>
      <li>Inspect and tighten hardware.</li>
      <li>Inspect all belts cables and chains.</li>
      <li>Lube all moving components as required.</li>
    </ul>
    <img src="./style/images/circuit.avif">
  </div>
  
  <div class="options">
    <h3>Options:</h3>
    
    <ul>
      <li>Monthly</li>
      <li>Quarterly</li>
      <li>Semi-annual</li>
      <li>Annual</li>
    </ul>
  </div>
  
  <div class="paragraph">
    <p>Any findings will be reported in the invoice, with an option to have any findings quoted for repair, separately.</p>
    
    <p>Any parts needed, per the repair quote, would be ordered and all repairs would be scheduled following arrival of the parts.</p>
  </div>
</div>

Answer 1

The image is not in the pictures section because it is nested inside the container and the img tag itself is not a grid item.

Below the working code

.pm {
  display: inline-grid;
  max-width: 100%;
  position: relative;
  margin: auto;
  grid-template-areas: "title title" "list picture" "options options" "paragraph paragraph";
  grid-template-rows: 10% 1fr 20% 10%;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.pm h2 {
  grid-area: title;
  text-align: center;
}

.pm .container ul {
  grid-area: list;
}

.pm .img-container {
  grid-area: picture;
  max-width: 30%;
  border-radius: 0.25em;
}

.pm .options {
  grid-area: options;
}

.pm .paragraph {
  grid-area: paragraph;
}

  
Preventative Maintenance:
  
  

    

      
Calibration of each piece of equipment as required.
      
Inspect any switches, controls and/or electrical components.
      
Inspect motor brushes and clean the motor fan vents.
      
Inspect and tighten hardware.
      
Inspect all belts cables and chains.
      
Lube all moving components as required.
    
    
  
  
  

    
  

  

    
Options:
    
    

      
Monthly
      
Quarterly
      
Semi-annual
      
Annual
    
  
  
  

    
Any findings will be reported in the invoice, with an option to have any findings quoted for repair, separately.
    
    
Any parts needed, per the repair quote, would be ordered and all repairs would be scheduled following arrival of the parts.