A href wider than image or image positioned to the left - html

Question

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 margin: auto, text-align: center, and align:middle in the actual html file, no luck.
I know several others have asked the same question, but their solutions does not help me.
/*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;
}
<div id="section2">
<a href="http://wordpress.bysuonpera.com/">
<img src="/Users/jonashansen/Desktop/hjemmeside/img/wordpress.jpg">
</a>
</div>

Answer 1

If you are familiar with bootstrap then you can put the image inside a col and give it an offset and make it to the centre horizontally the href link will also be as wide as the column you enter. it won't take the entire space. Take a look at the code that I have written, try it once:
<div id="section2" class="row">
<a class="col-md-6 col-md-offset-3 text-center col" href="http://wordpress.bysuonpera.com/"><img src="http://www.navipedia.net/images/a/a9/Example.jpg"/></a>
</div>

Answer 2

This is happening because you are adding padding to the image:
#section2 img {
padding: 0;
display: inline-block;
width: 20%;
height: 40%;
margin: 0;
}
#section2 a {
/*display: inline;*/
}
<div id="section2">
<img src="http://i.istockimg.com/file_thumbview_approve/21348043/3/stock-illustration-21348043-star-burst-and-sunbeam-background.jpg">
</div>

Answer 3

you can remove padding, margin from image make height auto and this will do for you
Update
if you want to center align img and have full width as clickable, make a tag as block and assign text-align: center
#section2 a {
display: block;
text-align: center;
}
#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;
display: inline;
width: 40%;
height: auto;
margin: 0;
}
#section2 a {
display: block;
text-align: center;
}
<div id="section2">
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg">
</div>