I have problem with my navigation. I try to center navigation elements and make them as block. Could you tell me why li elements are not block elements? I want to click on it not only on text.

```
html, body {margin: 0; padding: 0;}

body {
    background: black;
    color: yellow;
}

.nav {
    list-style: none;
    text-align: center;
    padding-bottom: 30px;
    border-bottom: solid brown 1px;
    font-size: 25px;
}

.nav li {
    display: inline-block;
    border: solid yellow 0.5px;
    padding-right: 30px;
}

.nav a {
    text-decoration: none;
    color: yellow;
}

```

and html:

```
<body>
    <ul class="nav">
        <li><a href="/">Home</a></li>
        <li><a href="/about/">About</a></li>
        <li><a href="/work/">Work</a></li>
        <li><a href="/clients/">Clients</a></li>
        <li><a href="/contact/">Contact</a></li>
    </ul>
</body>

```

Sorry for my English.