Flex Elemente untereinander teilweise verschoben

[kercon]

Hallo zusammen,
solange meine Flex-Elemente nebeneinander stehen ist alles ok, bei kleinen Ausgabegeräten sind meine beiden Elemente untereinander nicht mittig ausgerichtet... Was habe ich übersehen bzw. falsch definiert?

<ul class="flex-container">
    <li class="flex-element"> --- </li>
    <li class="flex-element"> --- </li>
</ul>

.flex-container {
margin-bottom: 25px;
padding:0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
list-style: none;
}

.flex-element {
max-width:510px;
padding: 8px 8px 0 8px;
text-align: justify;
border: solid 1px #ccc;
background-color:#fff;
box-shadow: 0 0 5px black;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
margin:0 0 10px 0;
}

Schonmal vielen Dank für Eure Tipps!

 

[kercon]

Vielen Dank für den Tipp. Weitere Styles habe ich nicht gefunden, habe das Problem folgend lösen können

.flex-container-start-top {
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content:center;
    list-style: none;
  }

.flex-element-start-top {
    max-width:510px;
    padding: 8px 8px 0 8px;
    text-align: justify;
    border: solid 1px #ccc;
    background-color:#fff;
    box-shadow: 0 0 5px black;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    margin:10px 12px 10px 12px;
    }