trying to position two buttons to the left and right of a parent div

Question

I'm using the owl carousel 2 plugin and I'm having issues trying to place the prev and next buttons to the right and left of the scroller. I'm using the navContainer argument allowing me to use a custom nav controller.

The current navContainer looks like this:

#customNav {
  position:absolute;
  top: 0px;
}

#customNav .owl-prev {
  top: 55px;
  left: -20px;
}
#customNav .owl-next {
  top: 55px;
  right: -20px;
}

I'm trying to place the left controller on the left of the carousel and the next controller to the right.

Here is my current code in jsfiddle

Any idea what I'm missing? Should the navController container be relative?

Answer 1

It took me some time but I fixed it.

This is the demo.

This did the trick:

#customNav {
    position:absolute;
    top: 0px;
    left:0px;
    right:0px;
}

#customNav .owl-prev {
    float:left;
    margin-left: 0.9375rem;
}
#customNav .owl-next {
    float:right;
    margin-right: 0.9375rem;
}