title: Centering with align-items center everything but not left-aligned
body: <p>Thank you for reading the post. I'm having a weird issue with Flexbox. I have a div container with some divs that need to be displayed 3 items in a row, 2 items for screen sizes less than 992 and 1 item for less than 568.</p>
  <p>To achieve this I used <code>display: flex</code> and <code> flex-wrap: wrap</code> to the container and <code>flex: 1 0 26%</code> to the inner divs. It seems to be working fine but the problem is with the inner contents of the divs. They are all left-aligned.</p>
  <p>I then used <code>display: flex</code>, <code>flex-direction: column</code> and <code>align-items: center</code> to the inner container but then all the inner contents get centered but not left-aligned.</p>
  <p>Here's the issue:
  <a href="https://i.stack.imgur.com/186sy.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/186sy.jpg" alt="enter image description here" /></a></p>
  <p>Here's what I've been trying to achieve:
  <a href="https://i.stack.imgur.com/Sj69H.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Sj69H.jpg" alt="enter image description here" /></a></p>
  <p>Here's the snippet:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#topic-list {
    display: flex;
    flex-wrap: wrap;
  }
  
  #topic-list div.list-wrapper {
    flex: 1 0 26%;
    margin: 10px;
    border: 1px solid #ccc;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="topic-list"&gt;
    &lt;div class="list-wrapper"&gt;
      &lt;div class="el"&gt;A&lt;/div&gt;
      &lt;div&gt;
        &lt;a href="#"&gt;Apple&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="list-wrapper"&gt;
      &lt;div class="el"&gt;B&lt;/div&gt;
      &lt;div&gt;
        &lt;a href="#"&gt;Ball&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="list-wrapper"&gt;
      &lt;div class="el"&gt;F&lt;/div&gt;
      &lt;div&gt;
        &lt;a href="#"&gt;Fan&lt;/a&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;a href="#"&gt;Fanta&lt;/a&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;a href="#"&gt;Follow&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="list-wrapper"&gt;
      &lt;div class="el"&gt;I&lt;/div&gt;
      &lt;div&gt;
        &lt;a href="#"&gt;Inspire&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="list-wrapper"&gt;
      &lt;div class="el"&gt;L&lt;/div&gt;
      &lt;div&gt;
        &lt;a href="#"&gt;Love&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="list-wrapper"&gt;
      &lt;div class="el"&gt;M&lt;/div&gt;
      &lt;div&gt;
        &lt;a href="#"&gt;Mad&lt;/a&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;a href="#"&gt;Money&lt;/a&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;a href="#"&gt;Mother&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="list-wrapper"&gt;
      &lt;div class="el"&gt;S&lt;/div&gt;
      &lt;div&gt;
        &lt;a href="#"&gt;Sad&lt;/a&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;a href="#"&gt;Son&lt;/a&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;a href="#"&gt;Sick&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="list-wrapper"&gt;
      &lt;div class="el"&gt;T&lt;/div&gt;
      &lt;div&gt;
        &lt;a href="#"&gt;Tea&lt;/a&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;a href="#"&gt;Total&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="list-wrapper"&gt;
      &lt;div class="el"&gt;W&lt;/div&gt;
      &lt;div&gt;
        &lt;a href="#"&gt;Wrap&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>