Good morning all, I was hoping for a bit of advice regarding my first responsive image gallery I'm coding at the moment.

 

The problem I'm having is when I slowly resize the browser window I get some strange movement from my <li>'s. I've uploaded the site for you to take a closer look, http://sleepylabs.co.uk/vehicles.html

 

From 1024 pixels up there are 3 vehicles on the first line, 2 on the second and 3 on the last. Then if I reduce the browser window to 1023 pixels I then get 3 vehicles on the first line, 3 on the next and 2 on the last (which is what I want), any ideas???

 

Here's my HTML . . .

 

<ul id="gallery" class="clear">
        <li>
          <a href="millenium.html">
            <img src="images/millenium1.jpg" alt="Millenium stretch limousine">
            <p>Millenium</p>
          </a>
        </li>
        <li>
          <a href="facelift.html">
            <img src="images/facelift1.jpg" alt="Facelift stretch limousine">
            <p>Facelift</p>
          </a>
        </li>
        <li>
          <a href="tuxedo.html">
            <img src="images/tuxedo1.jpg" alt="Tuxedo stretch limousine">
            <p>Tuxedo</p>
          </a>
        </li>
        <li>
          <a href="phantom.html">
            <img src="images/phantom1.jpg" alt="Rolls Royce Phantom">
            <p>Phantom</p>
          </a>
        </li>
        <li>
          <a href="flyingspur.html">
            <img src="images/flying-spur1.jpg" alt="Bentley Flyng Spur">
            <p>Phantom</p>
          </a>
        </li>
        <li>
          <a href="8seater.html">
            <img src="images/mb_8seat1.jpg" alt="8 seater transit">
            <p>8 seater</p>
          </a>
        </li>
        <li>
          <a href="8seatervip.html">
            <img src="images/mb_8seatvip1.jpg" alt="8 seater V.I.P mini bus">
            <p>8 seater V.I.P</p>
          </a>
        </li>
        <li>
          <a href="16seater.html">
            <img src="images/mb_16seat1.jpg" alt="16 seater mini bus">
            <p>16 seater</p>
          </a>
        </li>
      </ul>

and here's my CSS . . .

 

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

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
}

ul#gallery a {
  text-decoration: none; 
}

ul#gallery li a p {
  margin: 0;
}

ul#gallery a img {
  max-width: 100%;	
  display: block;
}

 

Look forward to your comments as this has been a bit of a head scratcher

 

Thanks

Image http://sleepylabs.co.uk/images/millenium1.jpg

height is 601px, should be 600px

Image http://sleepylabs.co.uk/images/millenium1.jpg

height is 601px, should be 600px

That'll be it, thanks Igorv

You're welcome.