Images wont center in responsive or mobile view

Iv made my own type of hover effect on three images in my “Our Fragrances” page, it looks great on the desktop view but has soon as i shrink the page they not aligned center, it looks horrible, and i like perfection.

If anyone could please help me, i would be so grateful.

I have only just started playing around with code, so im not always sure what I’m doing. below is the CSS code i put in and the html i entered in the specific page.

CSS

{ width: 100%; text-align: center; }?
/*GROW*/
.grow img {
  height: 300px;
  width: 300px;

  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.grow img:hover {
  width: 350px;
  height: 350px;
}

.aligncenter, img.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; }
}

html

<h2>We have over 200 fragrances, please select one of the options below to see our collection:</h2>

<div class="grow pic">
<p align="left"><a href="https://www.kreativefragrance.co.za/index.php/womans-fragrance/"><img style="padding-left: 54px; padding-right: 54px;" src="https://www.kreativefragrance.co.za/wp-content/uploads/2015/08/Woman-Fragrance.png" alt="" align="centre"/></a><a href="https://www.kreativefragrance.co.za/index.php/mens-fragrances/"><img src="https://www.kreativefragrance.co.za/wp-content/uploads/2015/08/mens-fragrance2.png" alt="" /></a><a href="https://www.kreativefragrance.co.za/index.php/unisex-fragrances/"><img style="padding-left: 54px; padding-right: 54px;" src="https://www.kreativefragrance.co.za/wp-content/uploads/2015/08/mens-fragrance.png" alt="" /></a></p>

</div>

my site is: https://www.kreativefragrance.co.za/index.php/our-fragrances/

Thanks in advance