title: How do I stop css pushing <li> to the right?
body: <p>This is my first question and I'm having real difficulties sorting this problem.  Basically I have created a gallery using ul and li to make it responsive.  The gallery can be found here:</p>
  
  <p><a href="http://www.radiologycafe.com/radiology-trainees/normal-variants" rel="nofollow">http://www.radiologycafe.com/radiology-trainees/normal-variants</a></p>
  
  <p>The issue I'm having is that if the text underneath the image is too long, it pushes the image directly below to the right of the page.</p>
  
  <p>How can I keep the images in a line whilst keeping the page responsive and avoiding the use of white-space:nowrap which causes the text to overlap with other text?!</p>
  
  <p>Can anyone help me!?</p>
  
  <p><a href="http://i.stack.imgur.com/kq5yB.jpg" rel="nofollow">Screenshot of the problem.  I have drawn on (using amazing photoshop skills) how I want it to look</a></p>