Как отцентрировать span с flexbox?

Question

[Skrolea]

Добрый день. Делаю календарь. Сразу Codepen
Даты съезжают влево, не заполняют пространство по центру. Что я напутал?

.calendar-right__items {
  display:flex;
  flex-direction: row;
  justify-content: center;  
  flex:1;
  flex-wrap:wrap;
  background-color: #fff; 
  list-style: none;
  margin: 0;
  padding: 0;  
  align-items: stretch;
}
  span {
    display: flex;
      flex-basis: calc(100% / 7);     
      text-align: center;     
}
    a{
      border-radius: 50%;      
      width: 25px;
      height:25px;      
      display: block;    
    }
  
}

Codepen

Comments

[Андрей Токмаков]

заголовок поправьте

Answer 1

[Сергей delphinpro]

.calendar-right__items {
  display:flex;
  flex-direction: row;
  /*justify-content: center;  */
  flex:1;
...

Answer 2

[Владислав Лысков]

codepen.io/anon/pen/WpaPKj

Answer 3

[Никита Кит]

если юзаешь flex, забудь о text-align, vertical-align итп. Используй только директивы флекса
https://css-tricks.com/snippets/css/a-guide-to-flexbox/