title: Moving images/links with CSS
body: <p>I need help with this small little problem I am having with the site I am building. I have a list of images with links to different websites and everything looks fine for the most part but when I hover over the last one in the row the links below move for some strange reason. I can't figure out! </p>
  
  <p>Imagine this what it looks like at first:</p>
  
  <pre><code>[img1] [img2] [img3]
  [img4] [img5] [img6]
  </code></pre>
  
  <p>This is what happens when I hover over any of the images/links on the right side:</p>
  
  <pre><code>[img1] [img2] [img3]
                [img4]
  [img5] [img6] [img7]
  </code></pre>
  
  <p>And this is my code: </p>
  
  <pre><code>.sites{
  float:left;
  width:215px;
  background: #eee;
  text-align:center;
  margin: 0px 13px 15px 0px;
  border: 1px solid #ccc;
  padding:10px;
  }
  
  .sites p{
  margin:0px;
  padding:10px;
  font:bold;
  }
  
  .sites a{
  border-bottom: 5px solid #000;
  border-top: 5px solid #000;
  display:block;
  }
  
  .sites a:hover{
  border-bottom: #F90;
  border-top: #f90;
  }
  </code></pre>
  
  <p>This is my HTML:</p>
  
  <pre><code>&lt;div id="main-content"&gt;    
  &lt;h1&gt; Check out all our DEADicated sites: &lt;/h1&gt;
  &lt;div class="sites"&gt;
      &lt;a href="http://www.eyeem.com/TheDEADicated" target="_blank"&gt;
      &lt;img src="images/sites/eye-em.jpg" width="215" height="150" alt="EyeEm"/&gt;&lt;/a&gt;
      &lt;p&gt; EyeEm &lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="sites"&gt;
      &lt;a href="http://www.facebook.com/DeadSaraArg" target="_blank"&gt;
      &lt;img src="images/sites/fb-argentina.jpg" width="215" height="150" alt="Facebook    Argentina"/&gt;&lt;/a&gt;
      &lt;p&gt; Facebook - Argentina &lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="sites"&gt;     
      &lt;a href="https://www.facebook.com/pages/The-DEADicated-Canada/427270554005649?ref=hl" target="_blank"&gt;
      &lt;img src="images/sites/fb-canada.jpg" width="215" height="150" alt="Facebook Canada"/&gt;&lt;/a&gt;
      &lt;p&gt; Facebook - Canada &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="sites"&gt;
      &lt;a href="http://www.facebook.com/ThedeadicatedEgypt" target="_blank"&gt;
      &lt;img src="images/sites/fb-egypt.jpg" width="215" height="150" alt="Facebook Egypt"/&gt;&lt;/a&gt;
      &lt;p&gt; Facebook - Egypt &lt;/p&gt;
  
  &lt;/div&gt;
  &lt;div class="sites"&gt;
      &lt;a href="http://www.facebook.com/DeadSaraItaly?ref=hl" target="_blank"&gt;
      &lt;img src="images/sites/fb-italy.jpg" width="215" height="150" alt="Facebook Italy"/&gt;&lt;/a&gt;
      &lt;p&gt; Facebook - Italy &lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="sites"&gt;     
      &lt;a href="http://www.facebook.com/thedeadicatedmexico" target="_blank"&gt;
      &lt;img src="images/sites/fb-mexico.jpg" width="215" height="150" alt="Facebook Mexico"/&gt;&lt;/a&gt;
      &lt;p&gt; Facebook - Mexico &lt;/p&gt;
  &lt;/div&gt;
  &lt;br/&gt;
  &lt;div class="sites"&gt;
      &lt;a href="http://www.facebook.com/DeadSaraTheDeadicatedUK" target="_blank"&gt;
      &lt;img src="images/sites/fb-uk.jpg" width="215" height="150" alt="Facebook UK"/&gt;&lt;/a&gt;
      &lt;p&gt; Facebook - UK &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;/br&gt;&lt;br&gt;&lt;br&gt;
  
  &lt;h2&gt; To join TheDEADicated, click &lt;a href="http://musichype.com/artists/dead-sara" target="_blank"&gt;HERE&lt;/a&gt;! &lt;/h2&gt;
  
  
  
  &lt;/div&gt; 
  </code></pre>
  
  <p>I'm pretty new to web design. Help please? </p>