我该如何在我的横幅上设计这三个图像的样式，使它们在保持响应性的同时水平显示？

<div class="banner">
  <div class="image-container">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="image-container">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <div class="image-container">
    <img src="image3.jpg" alt="Image 3">
  </div>
</div>

.banner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.image-container {
  width: 30%; /* 设置图像容器的宽度为30% */
  max-width: 100%;
  margin-left: 10px; /* 添加左右间距 */
  margin-right: 10px;
}

.image-container img {
  max-width: 100%;
  height: auto;
}

/* 在移动设备上进行媒体查询 */
@media only screen and (max-width: 600px) {
  .banner {
    flex-direction: column; /* 在小屏幕上垂直显示 */
    align-items: center;
  }

  .image-container {
    width: 90%; /* 在小屏幕上图像容器宽度增加到90% */
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 10px; /* 添加底部间距 */
  }
}