Как получить div с одинаковым пространством для обеих сторон, используя flex-wrap? - Flexbox

Question

Я не понимаю, почему мой CSS3 не работает ...

У меня есть 4 div, и я хочу адаптировать их к ширине устройства.Div одинакового размера, поэтому я использую flexbox для этого.

Используя flex-wrap: wrap перемещайте div на нескольких строках, используя justify-content: space-around Я хочу иметь одинаковое расстояние для каждой строки (где есть div) дляобе стороны.

Но не работает ...

Это HTML

<div id="rossi">
    <div id="title-rossi">Rossi</div>
    <div id="vini-rossi">
            <a href="/collezione-vini/il-nibbio-grigio">
            <div id="nibbio-grigio">
                <div id="img-nibbio-grigio">
                </div>
            <div id="nome-nibbio-grigio">Il Nibbio grigio</div>
            </div> 
            </a> 
            <a href="/collezione-vini/tenute-piano-regio">          
            <div id="tenute-piano-regio">
                <div id="img-tenute-piano-regio">
                </div>
            <div id="nome-tenute-piano-regio">Tenute Piano Regio</div>
            </div>
            </a> 
            <a href="/collezione-vini/tenute-san-savino"> 
            <div id="tenute-san-savino">
                <div id="img-tenute-san-savino">
                </div>
                <div id="nome-tenute-san-savino">Tenute San Savino</div>
            </div>
            </a>
            <a href="/collezione-vini/kline-rosso">  
            <div id="kline-rosso">
                <div id="img-kline-rosso">
                </div>
            <div id="nome-kline-rosso">Kline Rosso</div>
            </div>
            </a>
     </div>
   </div>

Я создал пример jsfiddle: https://jsfiddle.net/4960h32L/

Моя проблема в том, когда @media (max-width: 416px), поэтому в jsfiddle (или в локальном тесте) окно должно быть коротким.

#vini-rossi имеетflex-wrap: wrap и при максимальной ширине экрана 416px я также добавляю justify-content: space-around