CSS Buttons align issue

I was making this web page (I am a beginner in CSS), and I was wondering if anyone could help me to put the buttons aside of the blue box thingy

.btn-prev, .btn-next {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.7);
    display: inline-block;
    border: none;
    line-height: 40px;
    margin: 0 auto;
    top: 30%;
    z-index: 2;
    font-size: 30px;
    font-weight: bold;
    border-radius: 50%;
    font-family: monospace;
    cursor: pointer;
  }
  
  .btn-prev:hover, .btn-next:hover {
    background: rgb(238, 236, 236);
  }
  
  .btn-prev {
    left: 10% auto;
    right: 80%;
    margin: 0 auto;
    text-align: center;
    border: none;
    
  }
  
  .btn-next {
    right: 10% auto;
    left: 80%;
    margin: 0 auto;
    text-align: center;
    border: none;
  }

as y'all can see it's a bit of a mess because I was messing around and could use some help.

here is what it looks like
result
and I want the buttons aside from the blue box and centered in the middle, not flexed because it would f- up the position as I want it to move aside from the window, help 😥
needed result
here is how I would (theoretically) want it to look like, without further saying, thank you 😁

EDIT:
I will add the HTML for y'all to see

<section>
    <div id="btn-prev" class="btn-prev"><</div>
    <div id="btn-next" class="btn-next">></div>
    <div class="center_part">
      <div class="zoom">
   </div><br><br>
    <button class="button btnleer">Leer</button>
  </div>
  </section>

I didn't put all the html, just the section where the buttons are 🫠

.center_part {
  position: relative;
  text-align: center;
}

.btn-prev,
.btn-next {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.7);
  display: inline-block;
  border: none;
  line-height: 40px;
  z-index: 2;
  font-size: 30px;
  font-weight: bold;
  border-radius: 50%;
  font-family: monospace;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.btn-prev {
  left: 10px;
}

.btn-next {
  right: 10px;
}

.btn-prev:hover,
.btn-next:hover {
  background: rgb(238, 236, 236);
}

I'm a noob in HTML, but I guess this may help

Giving the main div(the div with blue blackground-color) position relative and both the button position absolute can set the button by changing the left right position accordingly as you want.

.btn-prev, .btn-next {
        position:absolute;
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.7);
        display: inline-block;
        border: none;
        line-height: 40px;
        margin: 0 auto;
        top: 30%;
        z-index: 2;
        font-size: 30px;
        font-weight: bold;
        border-radius: 50%;
        font-family: monospace;
        cursor: pointer;
      }
      
      .btn-prev:hover, .btn-next:hover {
        background: rgb(238, 236, 236);
      }
      
      .btn-prev {
        left: 10% auto;
        right: 100%;
        margin: 0 auto;
        text-align: center;
        border: none;
        
      }
      
      .btn-next {
        right: 10% auto;
        left: 100%;
        margin: 0 auto;
        text-align: center;
        border: none;
      }

Just use flex to align your content into a row. You'll have to move a button in the HTML around. But you'll get the effect you want. Much better than using position absolute which would need more wrapping elements to contain.

section {
  display: flex;
  flex-direction: row;
}

<section>
  <div id="btn-prev" class="btn-prev"><</div>
  <div class="center_part">
    <div class="zoom"></div>
    <br><br>
    <button class="button btnleer">Leer</button>
  </div>
  <div id="btn-next" class="btn-next">></div>
</section>

As I know if you want to let html elements order by horizontal you can use flex container with flex item. Try to search FlexBox on Google.