title: Images of same CSS class (.thumbnail in Bootstrap) are displaying in various sizes
body: <p>I'm having a design/css issue. I'm using Twitter Bootstrap and have a .row-fluid, with an unordered list of class thumbnails. Inside that, I have three .span3 classes where I am displaying images that are links of class .thumbnail (code below). The problem is, the images are displaying as different sizes for some reason. You can reference what I'm talking about here: <a href="http://douglascrescenzi.com/#portfolio" rel="nofollow">http://douglascrescenzi.com/#portfolio</a></p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;div class="row-fluid"&gt;
      &lt;ul class="thumbnails"&gt;
          &lt;li class="span3"&gt;
              &lt;h2&gt;Companies I've founded&lt;/h2&gt;
              &lt;a href="http://www.herodaysecurity.com" class="thumbnail" target="_blank"&gt;
              &lt;img src="images/hero-day.jpg" alt="Hero Day Security"&gt;&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
              &lt;a href="http://www.crowdrouser.com" class="thumbnail" target="_blank"&gt;
              &lt;img src="images/crowdrouser.jpg" alt="CrowdRouser"&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="span3"&gt;
              &lt;h2&gt;Employers&lt;/h2&gt;
              &lt;a href="http://syracusestudentsandbox.com/" class="thumbnail" target="_blank"&gt;
              &lt;img src="images/student-sandbox.jpg" alt="Syracuse Student Sandbox"&gt;&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
              &lt;a href="http://ischool.syr.edu/" class="thumbnail" target="_blank"&gt;
              &lt;img src="images/su-informaiton-studies.jpg" alt="Syracuse University - School of Information Studies"&gt;&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
              &lt;a href="http://www.mitre.org" class="thumbnail" target="_blank"&gt;
              &lt;img src="images/mitre.jpg" alt="The MITRE Corporation"&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="span3"&gt;
              &lt;h2&gt;Freelance&lt;/h2&gt;
              &lt;a href="http://www.accsocialsecurityservices.com/" class="thumbnail" target="_blank"&gt;
              &lt;img src="images/acc-sss2.png" alt="ACC Social Security Services"&gt;&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt; &lt;!--row-fluid --&gt;
  </code></pre>
  
  <p>Bootstrap CSS:</p>
  
  <pre><code>.thumbnails {
    margin-left: -20px;
    list-style: none;
    *zoom: 1;
  }
  
  .thumbnails:before,
  .thumbnails:after {
    display: table;
    content: "";
  }
  
  .thumbnails:after {
    clear: both;
  }
  
  .row-fluid .thumbnails {
    margin-left: 0;
  }
  
  .thumbnails &gt; li {
    float: left;
    margin-bottom: 18px;
    margin-left: 20px;
  }
  
  .thumbnail {
    display: block;
    padding: 4px;
    line-height: 1;
    border: 1px solid #ddd;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
       -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
  }
  
  a.thumbnail:hover {
    border-color: #0088cc;
    -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
       -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
            box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
  }
  
  .thumbnail &gt; img {
    display: block;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
  
  .span3 {
    width: 220px;
  }
  
  .row-fluid .span3 {
    width: 23.404255317%;
    *width: 23.3510638276383%;
  }
  </code></pre>
  
  <p>I'm sure this isn't the best way to do things, but it's almost working (aside from the slight different sizes in the images that are displaying.</p>
  
  <p>Any thoughts, suggestions are very much appreciated. Thanks!</p>