Place the mouse on third `lorem ipsum` and you'll see an unwanted `hover` effect on the next column. 

How to avoid this?

```css
.footer{
 column-count:2;
 background:#006790;
 padding:9px 14px;
}

.link{
 display:block;
 padding:4px 10px;
 margin:7px 3px;
 color:white;
 white-space:nowrap;
 font-size:1.1em;
 border-radius:9px;
}

.link:hover{
 background:white;
 color:black;
}
```

```html
<div class = 'footer'>
<a class='link' href='#'>lorem ipsum</a>
<a class='link' href='#'>lorem ipsum</a>
<a class='link' href='#'>lorem ipsum</a>
<a class='link' href='#'>lorem ipsum</a>
<a class='link' href='#'>lorem ipsum</a>
</div>
```