Ao tentar linkar uma NAV, o estilo CSS fica bagunçado

Bom dia pessoal, estou começando aprender front-end e me deparei com um problema que gostaria de entender o porque acontece.

Tenho esse trecho no meu código:

       <div class="box-item">             <div class="box-img">                 <img src="img/base-conhe-icon.png" alt="Icone de base de conhecimento"/>             </div>             <div class="box-desc">                 <h1>Documentação</h1>                 <p>.........</p>             </div>         </div> 

Essa div é renderizada dessa forma:

inserir a descrição da imagem aqui

Eu quero linkar toda a DIV pai, porém quando eu uso a tag envolta da DIV, o resultado é este:

inserir a descrição da imagem aqui

Com certeza no meu HTML e no CSS tem códigos redundantes e talvez técnicas que podem ser consideradas gambiarras, como disse, estou aprendendo. Meu questionamento maior é que sem a tag , fica perfeito, inclusive responsivo. Já com ela, a div é desconfigurada.