Navigation bar extended clickable area

Question

I've been playing around with HTML and CSS and I've got a problem. How can I make the padding left-right have link property too?

<div class="baraNavigatie">
            <ul class="lista">
                <li><a href="default.html">Bine ati venit!</a></li>
                <li><a href="cinesunt.html">Cine sunt?</a></li>
                <li><a href="ceofer.html">Ce ofer?</a></li>
                <li><a href="evenimente.html">Evenimente</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>

^a part of HTML code^

li{
    font-size:25px;
    display:inline;
    padding-left:40px;
    padding-right:40px;
}
.baraNavigatie{
    height:33px;
    background-color:blue;
    text-align:center;
}
li a{
    text-decoration:none;
    color:white;
    font-weight:bold;
    font-family: 'Avant Garde', Avantgarde, 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
}
li:hover{
    background-color:#6a92ff;
}

^CSS^

Sorry for my bad english also.

Answer 1

Easy - just apply the padding-left and padding-right to the <a> element instead of the <li>. The <a> tag creates a clickable link.

Try this:

li {
  font-size:25px;
  display:inline;
}
.baraNavigatie {
  height:33px;
  background-color:blue;
  text-align:center;
}
li a {
  padding-left:40px;
  padding-right:40px;
  text-decoration:none;
  color:white;
  font-weight:bold;
  font-family: 'Avant Garde', Avantgarde, 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
}
li:hover {
  background-color:#6a92ff;
}