title: What causes div elements to move when hovering over one element?
body: <p>So basically I float all my div elements (icons) to the left and margin left them to create space In between them and I display them inline. The problem I have now is that whenever I hover over one element(icon) the rest of the elements moves. Please can you explain what causes this, thanks a lot. Examples will be gladly appreciated.</p>
  
  <p>css: </p>
  
  <pre><code>    .facebookIc{
      font-size: 80px;
      margin-left: 120px;
  
      -webkit-transition: font-size 0.3s linear;
      }
  
      i.icon-facebook-circled:hover{
          color: #3b5998;
          font-size: 90px;
          -moz-transition: all 0.3s ease-in;
          /* WebKit */
          -webkit-transition: all 0.3s ease-in;
          /* Opera */
          -o-transition: all 0.3s ease-in;
          /* Standard */
          transition: all 0.3s ease-in;
  
  
      }
  
  
      .twitterIc{
  
      font-size: 80px;
      margin-left: 120px;
      -webkit-transition: font-size 0.3s linear;
      }
  
      i.icon-twitter-circled:hover {
         font-size: 90px;
          color: #00aced;
          -moz-transition: all 0.3s ease-in;
          /* WebKit */
          -webkit-transition: all 0.3s ease-in;
          /* Opera */
          -o-transition: all 0.3s ease-in;
          /* Standard */
          transition: all 0.3s ease-in;
      }
  
  .contactContent{
  position: relative;
  height: auto;
  width:100%;
  background: #b7d84b;
  opacity: 0.8;
  overflow:auto;
  padding: 20px 20px;
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;section  id = "contactContent" class="contactContent"&gt;
  &lt;div&gt;
  &lt;i class="icon-gplus-circled gplusIc"&gt;&lt;/i&gt;
  &lt;i class="icon-facebook-circled facebookIc"&gt;&lt;/i&gt;
  &lt;i class="icon-mail-circled mailIc"&gt;&lt;/i&gt;
  &lt;i class="icon-twitter-circled twitterIc"&gt;&lt;/i&gt;
  &lt;i class="icon-soundcloud-circled soundcloudIc"&gt;&lt;/i&gt;
  &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>