Question: I'm trying to get my carousel-indicators to align to the center of the screen, but `text-align:center` isn't doing anything to the indicator position. Everything else is working perfectly. Any idea why? Thanks.

HTML:

```
<ol class="carousel-indicators">
  <li data-target="#home-carousel" data-slide-to="0" class="active"></li>
  <li data-target="#home-carousel" data-slide-to="1"></li>
  <li data-target="#home-carousel" data-slide-to="2"></li>
</ol>

```

CSS:

```
.carousel-indicators {
    position: absolute;
    bottom:10px;
    right:0px;
    width:100%;
    height:10px;
    margin-right:50%;
    margin-left:50%;
    text-align:center;
    list-style: none;
    top: auto;
    padding: 0 0 15px 0;
    z-index:5;  
}

```

Answer: 
Please check the spippet

```css
.carousel {
    position: relative;
    height: 200px;
    background-color: red;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<div id="myCarousel1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
  <li data-target="#home-carousel" data-slide-to="0" class="active"></li>
  <li data-target="#home-carousel" data-slide-to="1"></li>
  <li data-target="#home-carousel" data-slide-to="2"></li>
</ol>

</div>
```
I always try this code for bootstrap 4 carousel indicators and it center-align carousel indicators for all the screens:

```
.carousel-indicators li {
    position: relative;
    left: 20px;
}

```