Кнопки улетели куда попало при расширении экрана

У меня есть сайт с кодом, где кнопки представлены в виде картинки, почему так происходит:

Вот код, который выполняет функцию:

HTML:

              <div class="frame-frame30">
              <img src="public/external/ellipse63671-g3xa-200h.png" alt="Ellipse63671" class="frame-ellipse6">
              <img src="public/external/ellipse73671-zbo-200h.png" alt="Ellipse73671" class="frame-ellipse7">
              <img src="public/external/ellipse73671-zbo-200h.png" alt="Ellipse83671" class="frame-ellipse8">
              <img src="public/external/ellipse73671-zbo-200h.png" alt="Ellipse93671" class="frame-ellipse9">
              <img src="public/external/ellipse73671-zbo-200h.png" alt="Ellipse103671" class="frame-ellipse10">
            </div>
            <div class="frame-frame31">
              <div class="frame-group1">
                <img src="public/external/стрелка-право.svg" alt="Ellipse13891" class="frame-ellipse1">
              </div>
            </div>
            <div class="frame-frame32">
              <div class="frame-group11">
                <img src="public/external/стрелка-лево.svg" alt="Ellipse13891" class="frame-ellipse1">
              </div>
            </div>

CSS:

.frame-frame30 {
  gap: 10px;
  top: 553px;
  left: 283.38671875px;
  width: 100px;
  display: flex;
  padding: 10px;
  position: absolute;
  align-items: flex-start;
}

.frame-frame31 {
  top: 142px;
  left: 400px;
  width: 30px;
  height: 30px;
  display: flex;
  position: absolute;
  align-items: flex-start;
  flex-shrink: 0;
}

.frame-group1 {
    top: 0px;
    left: 0px;
    width: 30px;
    height: 30px;
    display: flex;
    position: absolute;
    align-items: flex-start;
    flex-shrink: 1;
}

.frame-frame32 {
  top: 173px;
  left: 29.999998092651367px;
  width: 30px;
  height: 30px;
  display: flex;
  position: absolute;
  align-items: flex-start;
  flex-shrink: 0;
}

Почему так произошло и как это можно исправить?