How to fix nav and dots for slider given in design

I'm designing a slider in which I am trying to center the active dot between nav of owl carousel...Kindly help me in this

this is the design link https://lh3.googleusercontent.com/-q9eozmWynzc/XUfFk-qpMRI/AAAAAAAAS74/PUoAw3bshYYfiNl3k71mdVnzfs62Sp7igCK8BGAs/s0/2019-08-04.png

<div id="slider-area" class="owl-carousel owl-theme">
   <div class="item">
    <img src="img/bg.jpg" alt="images">
   </div>
   <div class="item">
    <img src="img/bg2.jpg" alt="images">
   </div>
   <div class="item">
     <img src="img/bg.jpg" alt="images">
   </div>
</div>
$('#slider-area').owlCarousel({
  loop:true,
  autoplay:true,
  dots:true,
  nav:true,
  items:1
 })