I have a table of contents that I want to keep the image on the far left and centralize the text, but when the text is too big, it overlaps with the image on the left. I want to keep this from happening, is there any way for that? Keep in mind, I'm finishing a project made by someone else so I don't want to make major changes.

The HTML:

```
<td class="text-center cart-product">
   <h2>
      <div>
         <img src="{{ item.product.image.url }}" alt="{{ item.product.title }}">
      </div>                        
      <div>
         <a>{{ item.product.title }}</a>
      </div>
   </h2>
</td>

```

The CSS:

```
.cart-product h2 a {
  color: #d85044;
  font-size: 20px;
  margin-left: -70px;
}

.cart-product img {
  height: 50px;
  width: 50px;
  margin-left: 10px;
  margin-right: 10px; 
}

.cart-product h2 {
  margin-top: 15px;
  margin-bottom: 15px;
  display: grid;
  grid-template-columns: 70px auto;
}

```