When trying to link a NAV, the CSS style gets messy

Question

Good morning guys, I’m starting to learn front-end and I came across a problem I’d like to understand why it happens.

I’ve got that bit in my code:

       <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>

This div is rendered this way:

I want to link the entire parent DIV, but when I use the DIV wrapped tag, the result is this:

Surely in my HTML and CSS there are redundant codes and maybe techniques that can be considered gambiarras, as I said, I’m learning. My biggest question is that without the tag , It is perfect, including responsive. Already with it, the div is disfigured.

HTML: https://pastebin.com/8QeAQHVZ CSS: https://pastebin.com/tWDEME6d

People, do not notice if you have mess or gambiarras, rsrs. In addition, I ask you to draw my attention to points that can be improved. Thanks!

Answer 1

Basically just put your <a> thus: <a href="#" class="box-item"> and remove the <div class="box-item"> from within that <a>. So you will apply the styles directly on <a> who is now the direct son of <div class="conteudo-principal"> and will no longer need div from within