title: align images in "li" tags
body: <p>I have thumbnails of images on my site. This is how it looks:<br>
  <img src="https://i.stack.imgur.com/R4SSm.png" alt="enter image description here"></p>
  
  <p>Let's consider the second row. There are two images( always two images in row) and I want to make that the second picture was aligned to the right.<br>
  How can I do this?</p>
  
  <p>This is example what I want:<br>
  <img src="https://i.stack.imgur.com/QdHvy.png" alt="enter image description here"></p>
  
  <p>This is the html code:</p>
  
  <pre><code>&lt;div class="navigation_container"&gt;
              &lt;div id="dpthumbs0" class="navigation"&gt;
                  &lt;a href="#" class="pageLink prev"&gt;&lt;/a&gt;
                  &lt;ul style="opacity: 1;" class="thumbs"&gt;
                          &lt;li class="selected" style="opacity: 1;"&gt;&lt;a rel="history" title="image" class="thumb" href="#1"&gt;
                              &lt;img height="60px" style="height: 58px; max-width: 79px;" src="/Image/GetImage?imageName=571437e8-ecfc-46f4-a14f-a645428fae46-pic_172.jpg"&gt;
                          &lt;/a&gt;&lt;/li&gt;   
                          &lt;li class="" style="opacity: 1;"&gt;&lt;a rel="history" title="image" class="thumb" href="#2"&gt;
                              &lt;img height="60px" style="height: 58px; max-width: 79px;" src="/Image/GetImage?imageName=5ef5e802-916a-4ede-af11-c90274c63218-pic_176.jpg"&gt;
                          &lt;/a&gt;&lt;/li&gt;   
                          &lt;li class="" style="opacity: 1;"&gt;&lt;a rel="history" title="image" class="thumb" href="#3"&gt;
                              &lt;img height="60px" style="height: 58px; max-width: 79px;" src="/Image/GetImage?imageName=fa6f5671-b9f6-48e6-a822-cea83424643c-pic_178.jpg"&gt;
                          &lt;/a&gt;&lt;/li&gt;   
                          &lt;li class="" style="opacity: 1;"&gt;&lt;a rel="history" title="image" class="thumb" href="#4"&gt;
                              &lt;img height="60px" style="height: 58px; max-width: 79px;" src="/Image/GetImage?imageName=10b628ed-387e-43b5-908b-80b92efb7d2b-pic_180.jpg"&gt;
                          &lt;/a&gt;&lt;/li&gt;   
                  &lt;/ul&gt;
                  &lt;!-- .thumbs--&gt;
                  &lt;a href="#" class="pageLink next"&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;!-- .navigation--&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>This is all css:</p>
  
  <pre><code>.navigation_container {
      float: right;
      margin: 15px 0;
      padding: 30px 0;
      position: relative;
  }
  .navigation {
      height: 275px;
      overflow: hidden;
      width: 175px;
  }
  .slider .thumbs {
      width: 175px;
  }
  .thumbs li {
      float: left;
      padding: 4px 0 4px 8px;
  }
  .thumbs li img {
      border: 1px solid #424D55;
      height: 58px;
      max-width: 79px;
  }
  </code></pre>
  
  <p>Thanks.</p>