Как сдвинуть иконки bg вправо к краю. Выглядеть должно как на картинке(

Кнопка добавляется через псевдоэлемент (::after) и позиционируется через position: absolute, так что вам нужно прижимать к правому краю не background, а именно элемент.

body {background-color: #1b1a1b;}

.questions-item {
  font-weight: 700;
  font-size: 24px;
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.question {
  color: #fff
}

.element {
  padding: 1em 3em;
  padding-right: calc(6em + 46px);
  position: relative;
}

.element:not(:last-child) {
  margin-bottom: 20px;
}

.element:nth-child(even) {
  color: white;
  background-color: #440F51;
}

.element:nth-child(odd) {
  background-color: #fff;
  color: #1C1A1A;
}

.element::after {
  content: "";
  display: block;
  background-color: red;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  position: absolute;
  top: calc(50% - (46px / 2));
  right: 3em;
}

.element:nth-child(odd)::after {
  background-image: url(/img/open-purple.svg);
}

.element:nth-child(even)::after {
  background-image: url(/img/open.svg);
}

<section class="questions">
  <h2 class="questions-title">Частые вопросы</h2>
  <ul class="questions-item">
    <li class="element">Можно ли забронировать комнату онлайн?</li>
    <li class="element">Могут ли вернуть деньги за бронь?</li>
    <li class="element">Какая комната самая популярная?</li>
    <li class="element">Как получить VIP карту?</li>
    <li class="element">Какая комната самая популярная?</li>
  </ul>
</section>

Так же позволил себе отредактировать стили, сделав их более "правильными".

И т.к. иконок не было в примере, я просто добавил псевдоэлементам красный фон, для демо, при использовании кода нужно будет убрать.

можно решить с помощью flex. Кртинку можно заменить icon. пример кода

  <h2>Частые вопросы</h2>
  <div class="box-items">
    <p>Можно ли забронировать комнату онлайн?</p>
    <svg viewBox="0 0 496 512" width="30" title="smile-wink" fill="blue">
      <path d="M0 256c0 137 111 248 248 248s248-111 248-248S385 8 248 8 0 119 0 256zm200-48c0 17.7-14.3 32-32 32s-32-14.3-32-32 14.3-32 32-32 32 14.3 32 32zm158.5 16.5c-14.8-13.2-46.2-13.2-61 0L288 233c-8.3 7.4-21.6.4-19.8-10.8 4-25.2 34.2-42.1 59.9-42.1S384 197 388 222.2c1.7 11.1-11.4 18.3-19.8 10.8l-9.7-8.5zM157.8 325.8C180.2 352.7 213 368 248 368s67.8-15.4 90.2-42.2c13.6-16.2 38.1 4.2 24.6 20.5C334.3 380.4 292.5 400 248 400s-86.3-19.6-114.8-53.8c-13.5-16.3 11.2-36.7 24.6-20.4z" />
    </svg>
  </div>
  <div class="box-items">
    <p class="element">Могут ли вернуть деньги за бронь?</p>
    <svg viewBox="0 0 496 512" width="30" title="smile-wink" fill="blue">
      <path d="M0 256c0 137 111 248 248 248s248-111 248-248S385 8 248 8 0 119 0 256zm200-48c0 17.7-14.3 32-32 32s-32-14.3-32-32 14.3-32 32-32 32 14.3 32 32zm158.5 16.5c-14.8-13.2-46.2-13.2-61 0L288 233c-8.3 7.4-21.6.4-19.8-10.8 4-25.2 34.2-42.1 59.9-42.1S384 197 388 222.2c1.7 11.1-11.4 18.3-19.8 10.8l-9.7-8.5zM157.8 325.8C180.2 352.7 213 368 248 368s67.8-15.4 90.2-42.2c13.6-16.2 38.1 4.2 24.6 20.5C334.3 380.4 292.5 400 248 400s-86.3-19.6-114.8-53.8c-13.5-16.3 11.2-36.7 24.6-20.4z" />
    </svg>
  </div>
  </div>

h2 {
  padding: 0 30px;
}
.box {
  display: flex;
  flex-direction: column;
}
.box-items {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  background-color: #dedede;
  color: blue;
  padding: 0 30px;
  margin: 15px;
}