我如何让这个手风琴响应式的同时又居中在页面上呢？

<div class="accordion-container">
  <div class="accordion">
    <h3 class="accordion-title">Section 1</h3>
    <div class="accordion-content">
      Content for section 1
    </div>
  </div>
  <div class="accordion">
    <h3 class="accordion-title">Section 2</h3>
    <div class="accordion-content">
      Content for section 2
    </div>
  </div>
  <div class="accordion">
    <h3 class="accordion-title">Section 3</h3>
    <div class="accordion-content">
      Content for section 3
    </div>
  </div>
</div>

.accordion-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.accordion {
  width: 300px;
  margin: 10px;
  border: 1px solid #ccc;
}

.accordion-title {
  background-color: #f0f0f0;
  padding: 10px;
  margin: 0;
  cursor: pointer;
}

.accordion-content {
  display: none;
  padding: 10px;
}

.accordion.active .accordion-content {
  display: block;
}

var accordions = document.getElementsByClassName("accordion");

for (var i = 0; i < accordions.length; i++) {
  accordions[i].addEventListener("click", function() {
    this.classList.toggle("active");
  });
}