How can I align the two li elements in the last row to be next to each other rather than in the middle? I am using flexbox for responsiveness on smaller screens.
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;
}