Is there a way to center an image without affecting padding around it?
Check out this sandbox for reference
HTML
<div class="imageParent">
<figure id='img-div'>
<img class='image card'
src='https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg'
alt='Cat sleeping' />
<figcaption id='img-caption'>
<p class='centeredText'> Cat sleeping </p>
</figcaption>
</figure>
</div>CSS
.image {
background: white;
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
padding: 2em 2em 4em 2em;
}
@media (max-width: 500px) {
.image {
padding: 1em 1em 2em 1em;
}
}