html - <a> link only functions if you click exact text. How do I make the entire <a> tag clickable? -

my website has modal-style popup window appears when user clicks link:

<li><a href="#contact"><label for="lightbox-demo">contact</label></a></li>

the problem link opens popup if click directly on "contact" text. if click within <a> tag, miss text, won't anything. how make if click anywhere in <a> tag, popup opens?

the popup code (if needed) is:

<aside class="lightbox">   <input type="checkbox" class="state" id="lightbox-demo" />   <article class="content">     <a href="#" class="closest"><img src="img/x.png" class="btn_close" title="close window"  alt="close contact window" /></a>  <form method="post" action="submit.php" id="contactform" class="signin">         <input name="name" id="name" type="text" class="feedback-input" placeholder="name" /> <input name="email" id="email" type="email" class="feedback-input" placeholder="email" required pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[a-z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)" required title="whoops! invalid email" aria-required="true"/>        <div class="antispam">        <br /><input name="url" type="hidden" /></div>        <textarea name="message" id="message" class="feedback-input" placeholder="comment" required minlength="15" required title="must @ least 15 characters"></textarea>         <button id="flybutton">             <p>submit </p>             <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">                 <path id="paper-plane-icon" d="m4z"></path>             </svg>         </button> </form>   </article>   <label class="backdrop" for="lightbox-demo"></label> </aside>     

thanks time.

if use current markup have on page provided in comments, css allow expand target area of link.

<style>    #nav > a{display: inline-block; padding: 10px;}    #nav > > li > label{cursor: pointer;} </style> 

the first rule using padding expand clickable area of link. second rule changes pointer text in label default pointer mimics link. recommend restructuring markup if leave fix issue.