I am facing difficulty in making the size of my <a> tag match the parent div (#logo) without exceeding its boundaries.
HTML
<div id="header">
<div id="logo">
<a href="#"></a>
</div>
<div class="hide" id="navigation">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Examples</a></li>
<li><a href="#">Form</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
CSS
div#logo {
background: url(https://i.imgur.com/sHTtXk4.png) no-repeat center center;
background-size: cover;
float: left;
line-height: 80px;
width: 10%;
height: 80px;
text-align: center;
}
div#logo a {
background: #fff;
width: 100%;
height: 100%;
padding: 100%;