**This is my CSS.**

```css
<style type="text/css"> .chart-legend {
  text-align: center;
}
.chart-legend li {
  list-style-type: none;
  padding-top: 15px;
}
.chart-legend li span {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 5px;
}
</style>

```

**HTML**

```html
<div class="col-xs-7 col-md-6" class="thumbnail">
  <div class="thumbnail" style="width:100%">
    <h4>  <span class="label label-primary">{{ a.title }}</span></h4>
    <div>
      <canvas id="canvas{{loopIndex}}" height="450" width="600"></canvas>
    </div>
    <div id="js-legend" class="chart-legend">
    </div>
  </div>
</div>

```

Here, the first legend entry gets aligned to the center, whereas the second entry does not go right below the aligned first one, but leaving some space towards the right. Below, is the image. Any help would be much appreciated. Thanks in advance :)

[![enter image description here](https://i.stack.imgur.com/zEoT4.png)](https://i.stack.imgur.com/zEoT4.png)