So I'm a little stumped. I'm trying to make a page to display images. I want there to be 5 images per row spaced with maximum amount when the window is at max width (~950 px), but I want them to get closer as you make it smaller and then, when there's 0 px between them, there will only be 4 images per row, and that will continue until a specific width. Kind of like Instagram, but I don't want the pictures to get smaller. Here's what I have:

HTML

```
<ul>
   <li>
      <img src="0.png">
   </li>
</ul>
<ul>
   <li>
      <img src="1.png">
   </li>
</ul>
<ul>
   <li>
      <img src="2.png">
   </li>
</ul>

```

CSS

```
ul
{
    padding: 0;
    margin: 0;
    list-style-type:  none;
}

ul li
{
    display: inline;
}

//the images are also float left, so they are horizontal

```

Basically, as you can see, I have nothing and I don't really know what to do. I'd appreciate any help. Thanks!