Не получается сделать спрайт css. Что не так (см. код)?

Всем доброго дня, можете помочь разобраться со спрайтами? Есть код, нужно заменить картинку на спрайт, но не пойму, как именно.

Вот код:

<div class="class1" style="margin:-28px 0px 0px 1110px;"><table>

<tbody>

<tr>

<td><a href="https://www.instagram.com/plus.vrn/" target="_blank" rel="noopener noreferrer"><img class="brighten alignnone wp-image-5210 size-full" src="https://site.ru/wp-content/uploads/2019/04/inst3.png" alt="" width="20" height="20" /></a>



<a class="brighten" href="https://vk.com/public167" target="_blank" rel="noopener noreferrer"><img class="brighten alignnone wp-image-5211 size-full" src="https://www.site.ru/wp-content/uploads/2019/04/vk3.png" alt="" width="20" height="20" /></a></td>

</tr>

</tbody>

</table></div>

Код, который выдал генератор спрайтов:

.bg-inst3 {

    width: 20px; height: 20px;

    background: url('css_sprites.png') -80px -10px;

}

Делал так (2 варианта):

<div class="class1" style="margin:-28px 0px 0px 1110px;"><table>

<tbody>

<tr>

<td><a href="https://www.instagram.com/plus.vrn/" target="_blank" rel="noopener noreferrer"><div class="bg-inst3" ></div></a>



<a class="brighten" href="https://vk.com/public167" target="_blank" rel="noopener noreferrer"><img class="bg-inst3"></a></td>

</tr>

</tbody>

</table></div>

Не работает. Что неправильно делаю?