<div class="container">
  <h2 class="container__title">Left Aligned</h2>
  <ul class="list list--inline">
    <li>Bravo</li>
    <li>Bravo</li>
    <li>Bravo</li>
    <li>Bravo</li>
    <li>Bravo</li>
    <li>Bravo</li>
    <li>Bravo</li>
  </ul>
</div>

<div class="container">
  <h2 class="container__title">Center Aligned</h2>
  <ul class="list list--inline list--align-center">
    <li>Bravo</li>
    <li>Bravo</li>
    <li>Bravo</li>
    <li>Bravo</li>
    <li>Bravo</li>
    <li>Bravo</li>
    <li>Bravo</li>
  </ul>
</div>
.list {
  list-style-type: none;
  margin: 0;
  padding-left: 0;
}

// Left margin which needs to be set for <li>
$space: 1.5em;

.list--inline {
  display: inline-block;
  padding-left: $space;
  margin-right: -2 * $space;
  
  > li {
    position: relative;
    display: inline;
    left: -1 * 2 * $space;
    margin-left: $space;
  }
}

.list--align-center {
  text-align: center;
}

// Not important. Just styling content of the example
.container {
  background-color: #e6ffed;
  max-width: 15em;
  margin: 0 auto;
  
  & + & {
    margin-top: 1em;
  }
}

.container__title {
  background: #fff;
  font-size: .75em;
  color: gray;
  font-weight: normal;
  margin: 0;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.