I'm working on my portfolio project in the Web Design track and when I tried to upload and center my own picture they turned out weird. There are two pictures on the first row like there is supposed to be but in the second row there is only one on the right and on the third row there is only one picture on the left.

What coding mistakes should I be looking for to fix this

Here is my project http://port-80-t5hr4vosh1.treehouse-app.com/

And here is my code https://w.trhou.se/5s5ukrvxv8

Here are (what I think are) the relevant parts HTML <ul id="gallery"> <li> <a href="img/Kawaii girl 1.jpg"> <img src="img/Kawaii girl 1.jpg" alt=""> <p>"Some cupid kills with arrows, some with traps" -Shakespere</p> </a> </li> <li> <a href="img/Korra and Asami.jpg"> <img src="img/Korra and Asami.jpg" alt=""> <p>Korra and Asami from The Legend of Korra</p> </a> </li> <li> <a href="img/lolita-girl.png"> <img src="img/lolita-girl.png" alt=""> <p>Sweet Lolita</p> </a> </li> <li> <a href="img/elsa.jpg"> <img src="img/elsa.jpg" alt=""> <p>Elsa from Frozen</p> </a> </li>

CSS

#gallery { margin:0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

Thank you so so much!<3