Help W/ Simple Fix: Row of Images, Pesky Margin

On this page: https://lucaswynne.com/category/portfolio/ my thumbnails get knocked down to the next line due to the extra margin on the right side even though I still have room. I tried overflow, maybe I’m using it incorrectly?

div.img
  {
  margin:0 20px 20px 0;
  border:0px solid #0000ff;
  height:auto;
  width:auto;
  float:left;
  overflow:hidden;
  }
div.img img
  {
  display:inline;
  margin:0px;
  border:0px solid #ffffff;
  width:216px;
  height:115px;
  overflow:hidden;
  }
div.img a:hover img
  {
  border:0px solid #0000ff;
  }
div.desc
  {
  text-align:left;
  font-weight:normal;
  width:auto;
overflow:hidden;
  }
div.title
  {
  text-align:left;
  font-weight:normal;
  width:auto;
overflow:hidden;
  }

And the CSS for my containing page:

#portfolio_content { clear:both; display:block; padding:20px 0; margin:0 20px 0 20px; border-top:1px solid #CCC; overflow:hidden }
#portfolio_content p { margin:0px 0 0 0 }
#portfolio_content ul { list-style:none }