Previously I posed a question here1, and it was answered appropriately to solve my first issue but not my second issue - the first being proper code arrangement and the second being the question I'm talking about. I removed the CSS code that was originally applied, which you can view on original question, and applied the new CSS code as follows:

.img {
  margin: 10px;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  /* max-width: 800px; */
}
  
.grid a {
  display: flex;
  align-items: center;
}

I removed the max-width: 800px; and received the following result.

Adding the max-width: 800px; showed the same results in image. Tried various combinations of CSS with no positive results. The code snippet as follows:

<div className={styles.grid}>
          <div className={styles.imgc}>
          <a href="..\pages\satweather.js">
            <img
              className={styles.img}
              src="weatherbutton.jpg"
              width="100"
              height="50"
              onclick="openModal();currentSlide(1)"> 
            </img>
            <div>&rarr; SatWeather</div>
          </a>
          </div>

/* code continues in repetition for 4 more images 
before ending with */

</div>

Does anyone have any suggestions on what I might try or a solution to this problem? To get these images aligned center and horizontally to the page. Help is appreciated.

Here is desired result, but without space between photo and link to page

Please Note: This is JS, not HTML.