我有9个图像在一个flex显示器，当他们没有包裹在标签，他们看起来很好。
enter image description here
然而，我想让这些图片成为可点击的，所以我把它们 Package 在标签里，但是格式变成了这样：
enter image description here
代码为：

<div class="nine-products-section">
  <button class="pre-btn">
    <img src="{{media url="wysiwyg/Round-face-test/arrow.png"}}" alt="">
  </button>
  <button class="nxt-btn">
    <img src="{{media url="wysiwyg/Round-face-test/arrow.png"}}" alt="">
  </button>
  <div class="product-container">
    <a
      href="xxxx"
      rel="noopener"
      class="product-link"
      ><img src="{{media
      url="wysiwyg/Round-face-test/Ana_Product_Block_3x_622x233.jpg"}}" alt=""
      class="product-image">
    </a>
    <a
      href="xxxx"
      rel="noopener class="
      product-link=""
      ><img src="{{media
      url="wysiwyg/Round-face-test/Logan_Product_Block_3x_622x233.jpg"}}" alt=""
      class="product-image"></a
    >
    <a
      href="xxxx"
      rel="noopener"
      class="product-link"
      ><img src="{{media
      url="wysiwyg/Round-face-test/Hugh_Product_Block_3x_622x233.jpg"}}" alt=""
      class="product-image">
    </a>
    <a
      href="xxxx"
      rel="noopener"
      class="product-link"
      ><img src="{{media
      url="wysiwyg/Round-face-test/Miles_Product_Block_3x_622x233.jpg"}}" alt=""
      class="product-image">
    </a>
    <a
      href="xxxx"
      rel="noopener"
      class="product-link"
      ><img src="{{media
      url="wysiwyg/Round-face-test/Rae_Product_Block_3x_622x233.jpg"}}" alt=""
      class="product-image"></a
    >
    <a
      href="xxxx"
      rel="noopener"
      class="product-link"
      ><img src="{{media
      url="wysiwyg/Round-face-test/Stella_Product_Block_3x_622x233.jpg"}}"
      alt="" class="product-image">
    </a>
    <a
      href="xxxx"
      rel="noopener"
      class="product-link"
      ><img src="{{media
      url="wysiwyg/Round-face-test/Peggy_Product_Block_3x_622x233.jpg"}}" alt=""
      class="product-image"></a
    >
    <a
      href="xxxx"
      rel="noopener"
      class="product-link"
    >
      <img src="{{media
      url="wysiwyg/Round-face-test/Serge2_Product_Block_3x_622x233.jpg"}}"
      alt="" class="product-image">
    </a>
    <a
      href="xxxx"
      rel="noopener"
      class="product-link"
      ><img src="{{media
      url="wysiwyg/Round-face-test/Wilder_Product_Block_3x_622x233.jpg"}}"
      alt="" class="product-image"></a
    >
  </div>
</div>

CSS：

.nine-products-section {
  position: relative;
  padding: 20px;
  display: flex;
  overflow-x: scroll;
}
.product-container {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
}
.product-image {
  width: 80%;
  display: flex;
  margin: 0 auto;
}

我试着设计标签的样式，高度/填充/宽度。但是它们都不起作用。我怎样才能让这些图像保持旧的样式，但可以点击重定向到链接？