Unslider Styling Style Issue Dots - html

Question

I am currently styling the http://unslider.com/ jquery banner.
I want to style the dots to be centered in a rectangle.
When I set the background in the dots class it pulls them out of the center.
I would just wrap a div around them but since there are not referenced in the html I am not sure what to do. I have tried to do this using background but it created issues.
CSS:
.banner { width 100% !important;
height:auto !important;
position: relative;
overflow: auto;
}
.dots {
position: absolute;
left: 0;
right: 0;
bottom: 5%;
text-align: center;
background-color:rgba(0, 0, 0, 0.5);
height:3vw;
width:7vw;
padding-top:1vw;
}
.dots li {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 4px;
text-indent: -999em;
border: 2px solid #fff;
border-radius: 6px;
cursor: pointer;
background:#e8e8e9;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}
HTML:
<div class="banner">
<ul>
<li><div class ="image-container"><img src="images_slider/slide1.jpg" alt="Slide1" width="1920" height="500">
<img class="leftbtn hvr-grow" alt="" src="images_slider/learnmore.png">
<img class="rightbtn hvr-grow" alt="" src="images_slider/catalog.png"></div>
</li>
<li><div class ="image-container"><img src="images_slider/slide2.jpg" alt="Slide2" width="1920" height="500">
<img class="leftbtn hvr-grow" alt="" src="images_slider/contact.png"></div>
</li>
<li><div class ="image-container"><img src="images_slider/slide3.jpg" alt="Slide3" width="1920" height="500">
<img class="leftbtn hvr-grow" alt="" src="images_slider/learnmore.png">
<img class="rightbtn hvr-grow" alt="" src="#"></div>
</li>
</ul>
</div>

Answer 1

As I said in my comments the dots are already centered in unslider, you dont have to add a class to the dots. If you want to make a centered rectangle of the dots navigation under the slider, you only need this in your css-code:
nav.unslider-nav {
margin: 0 auto;
width: 25%;
background-color:rgba(0, 0, 0, 0.5);
}
margin: 0 auto; centers the dots navigation if not 100%change width:; as you like the other selectors to use in your css-code to change dots as you like are:
nav.unslider-nav ol
nav.unslider-nav ol li
nav.unslider-nav ol li.unslider-active

Answer 2

It turns out something in the unslider code was inserting padding and large border around the dots causing funky behavior. I set them all to zero and the centering is now fine.