Need help in CSS positioning in my code - html

Question

I have been struggling with some CSS Style. The problem is that i am not able to position the images properly. Due to some reason the image is not displaying in proper expected flow. And I also want to centralize the whole content. It is not properly centralize when you resize the the browser. You can easily notice all this issue once you copy past my code. Here is my code. Thanks
HTML
body {
font-family: 'Open sans',sans-serif;
}
#content p {
padding: 5px;
font-size: 0.8em;
}
#wrap {
max-width: 900px;
padding: 3%;
margin: 0 auto;
}
ul {
list-style-type: none;
padding: 0;
}
#contact a {
padding-left: 35px;
background-repeat: no-repeat;
background-size: 20px;
}
#content a {
width: 100%;
display: inline-block;
height: 100%;
}
#content li img {
width: 100%;
}
a {
text-decoration: none;
}
#content li {
float: left;
width: 25%;
margin: 3%;
box-sizing: border-box;
background-color: bisque;
}
footer {
clear: both;
text-align: center;
}
footer img {
width: 25px;
}
h1 {
font-weight: normal;
font-family: 'Change one', sans-serif;
color: #fff;
font-size: 2.4em;
padding: 0px;
margin: 0px;
display: inline-block;
}
h2 {
font-size: .9em;
font-weight: normal;
color: #fff;
margin: 10px 0;
}
#content ul {
padding: 0;
margin: 0;
}
<div id="wrap">
<div id="content">
<ul>
<li><a href="img/numbers-01.jpg"><img src="img/numbers-01.jpg">
<p>Experimentation with color and texture</p></a>
</li>
<li><a href="img/numbers-02.jpg"><img src="img/numbers-02.jpg">
<p>Experimentation with color and texture Experimentation with color and texture</p></a>
</li>
<li><a href="img/numbers-06.jpg"><img src="img/numbers-06.jpg">
<p>Experimentation with color and texture</p></a>
</li>
<li><a href="img/numbers-09.jpg"><img src="img/numbers-09.jpg">
<p>Experimentation with color and textureExperimentation with color and texture</p></a>
</li>
<li><a href="img/numbers-12.jpg"><img src="img/numbers-12.jpg">
<p>Experimentation with color and texture</p></a>
</li>
</ul>
</div>
<footer>
<img src="img/twitter-wrap.png">
<img src="img/facebook-wrap.png">
<p>© 2014 Chimed.</p>
</footer>
</div>

Answer 1

The issue is that some of your text items in the <p> elements wrap to 3 lines, and some only wrap to 2 lines. This makes them taller than the others. When the next <li> wraps to the next line, it ends up being positioned to the right of the taller item.
Represented visually:
To fix this, you could try to make all your items the same height. That way they would wrap cleanly around each other.

Answer 2

Two "issues" are in your code, as I can see so far.
You're trying to center your content and doing it right with the #wrap. But the list elements inside the list have a width of 25% each, plus 3% margin to the sides, so 31% in total. So the closest you can get to 100% width of the surrounding element is 93%, leaving a gap on the right side, because of your float: left for the list elements. This should fix the problem:
ul {
width: 93%;
margin: 0 auto;
list-style-type: none;
padding: 0;
}
#content li {
display: inline-block;
vertical-align: top;
width: 25%;
margin: 3%;
box-sizing: border-box;
background-color: bisque;
}
I added a width and centering margin to the ul and you're li elements are now inline-block and aligned at their top line.