I've made the following very simple HTML page

```
<html>
<head>
    <style>
    a {
        padding: 5px;
        background-color: blue;
        color: white;
    }
    #header {
        background-color: orange;
        height: 50px;
    }
    </style>
</head>
<body>
    <div id="header"></div>
    <div> 
        <a href="/foo">foo</a>
        <a href="/foo">foo</a>
    </div>
</body>
</html>

```

As you can see in [this demo](http://jsfiddle.net/whura34x/), the blue background of the links overlaps the orange background of their parent's sibling (the div with `id="header"`). How can I prevent this from happening without removing the links' padding?