A href wider than image or image positioned to the left
<p>I have an image that is also a link. However the clickable area is wider than the actual image. Display img as inline does work, however this solution moves the image to the left, and I need it to be centered.
I've tried to center the image using <code>margin: auto</code>, <code>text-align: center</code>, and <code>align:middle</code> in the actual <code>html</code> file, no luck.</p>

<p>I know several others have asked the same question, but their solutions does not help me. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>/*Section2*/
#section2 {
  line-height: 1.8em;
  height: auto;
  margin-top: 2em;
  margin-bottom: 2em;
}
#section2 h2 {
  font-size: 2em;
  font-weight: bolder;
  text-align: center;
  padding: 1em 2.5em 0;
}
#section2 p {
  text-align: center;
  padding: 0 2.5em 0.5em;
  font-family: 'Open Sans', sans-serif;
}
#section2 img {
  padding: 0 0.2em 2em;
  display: inline;
  width: 40%;
  height: 40%;
  margin: auto;
}
#section2 a {
  display: inline;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="section2"&gt;
    &lt;a href="http://wordpress.bysuonpera.com/"&gt;
        &lt;img src="/Users/jonashansen/Desktop/hjemmeside/img/wordpress.jpg"&gt;
    &lt;/a&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>