Can't add padding to images
<p>I'm unable to add padding to my social media icons in Dreamweaver CC 2015. I have very little experience with code, but need to finish an assignment at school by tonight. Basically, I need spaces in between my icons to look more visually appealing (20px would be ideal).The problem I'm having is that when I change the padding or margin of CSS, in split view, it shows how the spaces are being created but when I switch to live view, the spaces go back to 0px and same when I preview it.</p>

<p><strong>The Code:</strong></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.social-icon {
  margin-right: 100px;
  margin-left: 100px;
  margin-top: 0px;
  padding-right: 100px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;footer&gt;
  &lt;center&gt;
    &lt;h4 class="footer" style="background-color: grey; width: 100%; padding-top: 100px; padding-bottom: 150px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px;"&gt;
      &lt;a href="http://facebook.com"&gt;&lt;img src="../Flikk/images/facebook.png" width="70px" height="70px" class="social-icon"&gt;&lt;/a&gt;
      &lt;a href="http://pinterest.com"&gt;&lt;img src="../Flikk/images/pinterest.png" width="70px" height="70px" class="social-icon"&gt;&lt;/a&gt;
      &lt;a href="http://twitter.com"&gt;&lt;img src="../Flikk/images/twitter.png" width="70px" height="70px" class="social-icon"&gt;&lt;/a&gt;
      &lt;a href="http://googleplus.com"&gt;&lt;img src="../Flikk/images/gplus.png" width= "70px" height= "70px" class="social-icon"&gt;&lt;/a&gt;
      &lt;a href="http://youtube.com"&gt;&lt;img src="../Flikk/images/youtube.png" width= "70px" height= "70px" class="social-icon"&gt;&lt;/a&gt;
    &lt;/h4&gt;
  &lt;/center&gt;
&lt;/footer&gt;</code></pre>
</div>
</div>
</p>