Struggling to align images in a gallery at the bottom of my webpage. They keep appearing on separate lines instead of next to each other.
HTML:
<section id="galleries">
<h2>Galleries</h2>
<article class="img-item">
<figure>
<a href="/images/martin/Photo24_21.jpg" rel="lightbox" >
<span class="thumb-screen"></span>
<img src="/images/martin/Photo24_21.jpg" alt="Martin"/>
</a>
</figure>
</article>
<article class="img-item">
<figure>
<a href="/images/martin/Photo26_23.jpg" rel="lightbox" >
<span class="thumb-screen"></span>
<img src="/images/martin/Photo26_23.jpg" alt="Martin"/>
</a>
</figure>
</article>
<article class="img-item">
<figure>
<a href="/images/martin/PICT0647.JPG" rel="lightbox" >
<span class="thumb-screen"></span>
<img src="/images/martin/PICT0647.JPG" alt="Martin"/>
</a>
</figure>
</article>
</section
CSS:
#galleries, #main-content
{
line-height:25px;
clear:both;
width:auto;
max-width:900px;
margin:0 auto;
}
#galleries h2, #main-content h3
{
border-bottom: 1px solid #D6D0C1;
margin-bottom: 20px;
}
#galleries .img-item
{
float:left;
margin-right:25px;
}
#galleries .img-item a
{
position:relative;
display:block;
}
Looking for assistance to resolve this issue. It's strange because on one of my pages the images appear correctly?