<a> não pega a <div> toda

Programação
#1

Eu fiz algumas divs com background-image, em que ao clicar nesse div ela redireciona para um link, o negocio é que o link so pega em determinadas partes dessa div,no caso o centro dela, ja tentei dar um width:100%, mas não resolveu em nada

Segue o codigo html:

<div id="top">
		<a href="artigo_1.html">
        <div id="destaques-1">
             <div id="titulo-destaques-maior">Arqueologos encontram vestigios do primeiro humano a chegar na região
                   do juazeiro</div>
        </div>
		</a>
		<a href="artigo_1.html">
        <div id="destaques-2">
                  <div id="titulo-destaques">Alaercio Pereira e suas aventuras</div>
        </div>
		  </a>
	    <a href="artigo_1.html">
        <div id="destaques-3">
                  <div id="titulo-destaques">Homem é flagrado tentando roubar mel nativo de abelhas do caririaçu</div>
        </div>
		</a>
              </div>

Codigo css:

#destaques-1{
    position: relative;
	border:1px solid rgba(0,0,0,.5);
	border-radius:3px;
	float:left;
    margin: 30px 0px 0px 100px;
    width: 45vw;
	height: 90vh;
	background-image: url("Imagens/alan.jpg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	box-shadow: 0px -200px 596px 0px rgba(0,0,0,0.8) inset;
}
#destaques-2{
    position: relative;
	top:30px;
	float:right;
    right: 2vw;
    width: 40vw;
	height: 44vh;
	border:1px solid rgba(0,0,0,.5);
	border-radius:8px;
	background-image: url("Imagens/alaercio.jpg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	box-shadow: 0px -75px 50px rgba(0,0,0,0.8) inset, 0px 0px 50px rgba(0,0,0,0.8) inset;
    }
#destaques-3{
	position: relative;
	float:right;
	margin-top:40px;
    right: 2vw;
    width: 40vw;
	height: 44vh;
	border:1px solid rgba(0,0,0,.5);
	border-radius:8px;
	background-image: url("Imagens/alaercio2.jpg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	box-shadow: 0px -75px 50px rgba(0,0,0,0.8) inset, 0px 0px 50px rgba(0,0,0,0.8)	inset;
}
#titulo-destaques-maior{
	color:white;
	font-family:timeless;
	font-size: 42px;
	width:92%;
	position:relative;
	top:40vh;
	left:1vw;
}
#titulo-destaques{
	color:white;
	font-family:timeless;
	font-size: 31px;
	width:90%;
	position:relative;
	top:32vh;
	left:1vw;
}
#2

Eu testei aqui e os links estavam certos.

De qualquer forma, eu acho que, ao invés de vc posicionar as <div>, vc deveria posicionar as <a> já que elas que são os containers. Eu fiz uma modificação:

<div id="top">
  <a id="destaques-1" href="artigo_1.html">
    <div id="titulo-destaques-maior">Arqueologos encontram vestigios do primeiro humano a chegar na região do juazeiro</div>
  </a>
  <a id="destaques-2" href="artigo_2.html">
    <div id="titulo-destaques">Alaercio Pereira e suas aventuras</div>
  </a>
  <a id="destaques-3" href="artigo_3.html">
    <div id="titulo-destaques">Homem é flagrado tentando roubar mel nativo de abelhas do caririaçu</div>
  </a>
</div>

E acrescentei este CSS:

#top a {
  display: block;
  text-decoration: none;
}