Question: [This code](http://jsfiddle.net/we67Lp6o/1/) leaves this weirdly shaped border *(it's the active link border)* when you click the image, like so:

![enter image description here](https://i.stack.imgur.com/tIJ3X.jpg)

And when we [put an orange background on the `<a>` element](http://jsfiddle.net/Lg5a0ksg/2/) we see that there's an orange area underneath the image. So, `<a>` wraps around the image, but also around an area underneath it.

Why does `<a>` do that?

Answer: 
First, by default element has an 'outline' decoration, to disable it use the following css rule:

```
a { outline: 0 }

```

Second, the area is created by another css property you apply on the image itself: 'margin', which is the margin between the image to the elements around it, in this case it affects the element which wraps it, to fix that change the following rules:

```
.socialBtn { 
    /* Removed margin here so there won't be space around image */
    height: 2.5em;
    width: 2.5em;
} 
a {
    height: 2.5em; /* Gave it width like the image */
    width: 2.5em; /* Gave it height like the image */
    display: inline-block; /* Made it inline-block so it can have width and height */
}

```

<http://jsfiddle.net/we67Lp6o/6/>

**UPDATE:**

Changing source to understand how the display property: [block vs inline-block vs inline](https://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block).

Removed "outline: 0" from a selector, it is a bad practice, read why [here](http://outlinenone.com/).
`inline-block`is the property you need for the `<a>` elements. For the spacing issues, the margins need to be removed.

The reason for the strangely shaped border, is of the `outline` property on `<a>`. It's showing you the area of your link, but due to the `display` and `margin` properties it is a different size than your `img`. 

Here is the new CSS:

```
.header {
    width: 650px;
    height: 150px;
    clear: left;
    margin: 0px auto;
    background-color: #efefef;
    position: relative;
    border-radius: 4em 4em 0 0;
}

.social{
    padding: 1em 2em 0 0;
    display: inline-block;
    position: absolute;
    right: 0;
}

.socialBtn{
    height: 2.5em;
    width: 2.5em;
}

img {
    display: block;
}

a {
    display: inline-block;
    background-color: orange;
}

```

<http://jsfiddle.net/Lg5a0ksg/4/>