When trying to link a NAV, the CSS style is messed up

-1

Good morning, I'm starting to learn front-end and I came across a problem that I would like to understand why it happens.

I have this snippet 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:

IwanttolinktheentireparentDIV,butwhenIusethetagenclosedintheDIV,theresultisthis:

CertainlyinmyHTMLandCSShaveredundantcodesandmaybetechniquesthatcanbeconsideredgambiarras,asIsaid,I'mlearning.Mybiggestquestionisthatwithoutthetag,it'sperfect,evenresponsive.Alreadywithit,thedivisunconfigured.

HTML: link CSS: link

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

    
asked by anonymous 11.12.2018 / 13:52

1 answer

0

Basically just put your <a> like this: <a href="#" class="box-item"> and remove the <div class="box-item"> from within that <a> . So you're going to apply the styles directly to the <a> which is now the direct child of <div class="conteudo-principal"> and will no longer need the div from within

    
11.12.2018 / 14:42