flex space-between doesn't work

Question

I'm trying to center horizontally (img - .info - img) using space-between property. I'm facing a little issue the space-between doesn't add spaces between elements.

I know I'm missing something but I can't figure it out!

HTML:

<ul>

  <li class="box-match">
    <a href="#">
      <img src="http://lorempixel.com/20/21" class="team1" alt="">
      <div class="info">
        <span class="time">10:30</span>
        <span class="score">0-2</span>
      </div>
      <img src="http://lorempixel.com/20/20" class="team2" alt="">
    </a>
  </li>

</ul>

CSS:

a{
  text-decoration: none;
  width: 98px;
  height: 40px;
  display: flex;
  flex-flow: row no-wrap;
  align-items: center;
  align-content: space-between;

  background-color: lightgray;
}

.info{
  text-align: center;
  display: block;
  width: 40px;
}

ul{
  list-style: none;
}

http://codepen.io/eldev/pen/EaQJvR?editors=110

Answer 1

You are looking for justify-content: space-between.

Updated Example

MDN justify-content

The CSS justify-content property defines how a browser distributes available space between and around elements when aligning flex items in the main-axis of the current line. The alignment is done after the lengths and auto margins are applied, meaning that, if there is at least one flexible element, with flex-grow different than 0, it will have no effect as there won't be any available space.

a {
  text-decoration: none;
  width: 98px;
  height: 40px;
  display: flex;
  flex-flow: row no-wrap;
  align-items: center;
  justify-content: space-between;
  background-color: lightgray;
}

Answer 2

In my case one of the flex items had a margin-left: 100px; set. Removing it fixed the problem.