Why is one of my gallery images out of place? - html

Question

Here's a link to my site (Currently a work in progress so very basic right now):
website
I just can't figure out why one image is messed up. It's not even the last image in the gallery and it's the same size as all the other images. Maybe i'm missing the obvious, I'm pretty tired.
Here's the code: https://jsfiddle.net/b0r684hh/2/
HTML
<div class="row">
<div class="col-lg-10">
<h1 class="page-header">Ryk Design</h1>
</div>
<!--<div class="col-lg-2 page-header">
<ul class="nav navbar-nav">
<li>
<a class="invert" href="#">About</a>
</li>
<li>
<a class="invert" href="#">Contact</a>
</li>
</ul>
</div>-->
</div>
<div class="row">
<div id="photos">
<ul id="photo-gallery">
<li>
<a href="img/DoomQuoteMed.png">
<img src="img/thumbs/DoomQuoteThumb.png">
</a>
</li>
<li>
<a href="img/crop/SlaveBlur.png">
<img src="img/thumbs/SlaveBlur.png">
</a>
</li>
<li>
<a href="img/love wins2.png">
<img src="img/love wins2.png">
</a>
</li>
<li>
<a href="img/rd.png">
<img src="img/thumbs/rdcrop.png">
</a>
</li>
<li>
<a href="img/crop/taplrCrop.png">
<img src="img/thumbs/taplrCrop.png">
</a>
</li>
<li>
<a href="img/cider.jpg">
<img src="img/cider.jpg">
</a>
</li>
<!--<li>
<a href="http://40.media.tumblr.com/7302cf024c924726c6ad99bb80b0be41/tumblr_nauccbKUCw1tubinno1_1280.jpg">
<img src="http://40.media.tumblr.com/7302cf024c924726c6ad99bb80b0be41/tumblr_nauccbKUCw1tubinno1_1280.jpg">
</a>
</li>
<li>
<a href="http://41.media.tumblr.com/fddb3f2b0bdf390efd7ea87372e75fa5/tumblr_ndyg3pYbKW1tubinno1_1280.jpg">
<img src="http://41.media.tumblr.com/fddb3f2b0bdf390efd7ea87372e75fa5/tumblr_ndyg3pYbKW1tubinno1_1280.jpg">
</a>
</li>
<li>
<a href="http://41.media.tumblr.com/758a5cb9046fde53138ad0f55527ca25/tumblr_ndyfdoR6Wp1tubinno1_1280.jpg">
<img src="http://41.media.tumblr.com/758a5cb9046fde53138ad0f55527ca25/tumblr_ndyfdoR6Wp1tubinno1_1280.jpg">
</a>
</li>-->
</ul>
</div>
</div>
CSS
a,
h2,
h3 {
font-family: 'Montserrat', sans-serif;
margin: 0;
}
h1 {
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 92px;
text-transform: uppercase;
text-rendering: optimizeLegibility;
}
a {
color: #000;
}
.invert {
color: #fff;
background-color: #000;
}
.col-md-4 p {
padding-top: 5px;
}
a:hover {
color: #000;
background-color: #fff;
text-decoration: none;
}
.nav,
.navbar-nav {
margin: 0;
padding: 0;
}
body {
margin: 0;
}
.page-header {
border: none;
padding-bottom: 40px;
}
footer {
margin: 50px 0;
}
.row {
padding-left: 0;
}
#photos {
opacity: .88;
}
#photos img {
width: 30%;
float: left;
display: block;
margin: 1px;
}
ul {
list-style: none;
margin: 0px auto;
padding: 10px;
display: block;
max-width: 100%;
text-align: center;
}
#overlay {
background: rgba(0, 0, 0, .8);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
text-align: center;
}
#overlay img {
margin: 10% auto 0;
width: 550px;
border-radius: 5px;
}
#photos {
width: 100%;
padding: 10px;
}
#photo-gallery {
width: 100%;
}
Cheers for the help guys!

Answer 1

You should float li elements instead of img elements, just change the css,
Here is the updated jsfiddle
#photos li {
width: 30%;
float: left;
display: block;
margin: 1px;
}
#photos img {
max-width: 100%
}

Answer 2

Your problem is due to the first image having a bigger height than the others. If you inspect your images, you'll see that all of them have a height of 339px - EXCEPT the first image - that one is 339.33.
Since you are floating your images, this very slight difference throws off the alignment. There 2 solutions:
1) Set all of the images the same height
2) Clear the first image of each row so it resets the alignment. So with your example, having 3 images across you would want to clear the 4th image:
#photo-gallery li:nth-child(3n+1) img {
clear: left;
}

Answer 3

its seems the first image height is .39 bigger so pushes them around. But you should be able to do this better etc
something like this might help as well.
http://codepen.io/simondavies/pen/VaRBMo
<div class="image-outer-wrapper">
<div class="image-wrapper CasinoLink"></div>
<div class="image-wrapper CorpLink"></div>
<div class="image-wrapper CasinoLink"></div>
<div class="image-wrapper CorpLink"></div>
<div class="image-wrapper CasinoLink"></div>
<div class="image-wrapper CorpLink"></div>
</div>
.image-outer-wrapper {
margin: 0 auto;
padding: 0;
width: 100%;
height: auto;
position: relative;
}
.image-outer-wrapper:before,
.image-outer-wrapper:after { content: " "; display: table;}
.image-outer-wrapper:after {clear: both;}
.image-outer-wrapper .image-wrapper {
margin:5px;
position: relative;
float: left;
width: 279px;
height: 237px;
text-decoration: none;
transition: background-position 500ms;
cursor: pointer;
}
.image-outer-wrapper .image-wrapper.CasinoLink {
background: url('http://placehold.it/558x237');
background-position: 0 0;
}
.image-outer-wrapper .image-wrapper.CorpLink {
background: url('http://placehold.it/558x237');
background-position: 0 0;
}
.image-outer-wrapper .image-wrapper:hover {
background-position: -279px 0;
}