html - align-items with justify content not working properly -

this question has answer here:

• properly sizing , aligning flex item(s) on last row 1 answer

i want make 2 li in last row, next each other, , not in middle. using flex, can responsive in smaller screens.

http://codepen.io/anon/pen/vexzqk

ul {   display: flex;   margin: 0 auto;   padding: 0;   width: 800px;   list-style: none;   flex-wrap: wrap;   background-color: red;   justify-content: space-between; }  li {   display: flex-item;   padding: 15px 0;   transition: transform .5s ease-in-out;   transform: scale(1);   margin: 10px auto;   background-color: blue;   width: 150px; } 

you can try one:\

ul {   display: flex;   margin: 0 auto;   padding: 0;   width: 800px;   list-style: none;   flex-wrap: wrap;   background-color: red;   justify-content: space-between;   display:inline-block; }  li {   display: flex-item;   padding: 15px 0;   transition: transform .5s ease-in-out;   transform: scale(1);   margin: 10px auto;   background-color: blue;   width: 150px;   display:inline-block; } 

demo here