I'm trying to create a gallery at the bottom of my page, why aren't my lightbox2 images in next to each/in rows?

Question

been trying to create a gallery at the bottom of my pages to finish my latest website but for some reason they're 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;
}

Any help would be greatly appreciated, its odd because on one of my pages the images are fine?

Answer 1

After looking at your css on your website I made the following changes to help you layout the images more to your liking.

CSS Changes:

/*Patch:Fixes issue with lightbox images not being displayed side by side */

/*removed .img-item img , You were making all child elements of #galleries 40% width*/
#galleries 
{
    /*changed from 40% to 60% to give a better looking aspect ratio*/
    width: 60%;
}

.img-item{

    /*Set the width of the image item containers*/
    width:25%;
}


.img-item img{

/*make sure the image doesn't become larger than its container*/
max-width:100%;

/* You have to give the image some height so the smaller ones do not stack up
   on top of each other at the end of the container*/
height:200px;
}