I added a CSS accordion menu to my squareqpace site, but it seems to be extending beyond the edge of the site

I added some code blocks to my squarespace site in order to have an accordion style menu for my faq page. Here is my source for the code. However, for some reason the code elements seem to have extended beyond the right edge of the page, so a scroll bar gets added, but it just scrolls into a blank section to the right of the content (see pic attached). I've tried changing up the margins, padding, and width on all of the CSS elements, but I can't get the accordion to fit properly on the screen. Can anyone please help me?? Here is the code that I'm using...

.accordion {
  margin: auto;
  width: 100%;
  box-sizing: border-box;
}

.accordion__wrapper {
  border: 1px solid #a9a9a9;
  border-radius: 4px;
  list-style: none;
  margin: 1rem 0;
  width: 100%;
  box-sizing: border-box;
}

.accordion__header,
.accordion__item {
  float: left;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  position: relative;
  width: 100%;
  text-align: center;
  height: 50%;
  box-sizing: border-box;
}

.accordion__header {
  background: auto;
  border-bottom: 1px solid #a9a9a9;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  padding-bottom: 1rem;
  box-sizing: border-box;
}

.accordion__item {
  background: auto;
  border-bottom: 1px solid #a9a9a9;
  margin-bottom: 1px;
  padding-bottom: 0.5rem;
  height: 50%;
  box-sizing: border-box;
}

.accordion__item:last-of-type {
  border: 0;
  border-radius: 4px;
  padding-bottom: 0;
}

.accordion__item span {
  position: absolute;
  text-align: right;
  transition: all 0.2s ease-in;
}

.accordion__item input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 50%;
  z-index: 1;
  opacity: 0;
}

.accordion__item input[type=checkbox]:checked~div.panel {
  float: left;
  margin: 5px 0;
  max-height: 0;
  opacity: 0;
  transform: translate(0, 50%);
}

.accordion__item input[type=checkbox]:checked~span {
  transform: rotate(90deg);
}

<div class="accordion">
  <ul class="accordion__wrapper">
  
    <li class="accordion__header">
      <h2>Subscription FAQ</h2>
    </li>
    <!-- accordion__header -->

    <li class="accordion__item">
      <input type="checkbox" checked>
      <h4>+ Question 1</h4>
      <div class="panel">
        <p4>Answer to question 1</p4>
      </div>
      <!-- panel -->
    </li>
    <!-- accordion__item -->

    <li class="accordion__item">
      <input type="checkbox" checked>
      <h4>+ Question 2</h4>
      <div class="panel">
        <p4>Answer to question 2</p4>
      </div>
      <!-- panel -->
    </li>
    <!-- accordion__item -->

    <li class="accordion__item">
      <input type="checkbox" checked>
      <h4>+ Question 3</h4>
      <div class="panel">
        <p4>Answer to question 3</p4>
      </div>
      <!-- panel -->
    </li>
    <!-- accordion__item -->
  </ul>
  <!-- accordion__wrapper -->
</div>
<!-- accordion -->

scrollbar appears at the bottom of page, but scrolls into an empty section