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: 
`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/>
Set your images to `display: block` (or alternatively, to `vertical-align: bottom`) to remove the default space at the bottom. (By default, images align to the `baseline` of any potential text next to them, and they leave that space there even if there's no text beside them.)