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">
        <a href="#"><img class="leftbtn hvr-grow" alt="" src="images_slider/learnmore.png"></a>
        <a href="#"><img class="rightbtn  hvr-grow" alt="" src="images_slider/catalog.png"></a></div>
        </li>
        <li><div class ="image-container"><img src="images_slider/slide2.jpg" alt="Slide2" width="1920" height="500">
         <a href="#"><img class="leftbtn  hvr-grow" alt="" src="images_slider/contact.png"></a></div>
        </li>
        <li><div class ="image-container"><img src="images_slider/slide3.jpg" alt="Slide3" width="1920" height="500">
        <a href="#"><img class="leftbtn  hvr-grow" alt="" src="images_slider/learnmore.png"></a>
        <a href="#"><img class="rightbtn  hvr-grow" alt="" src="#"></a></div>
        </li>

    </ul>
    </div>

```