Display: inline-block isn't working

Question

It's so frustrating when something as simple as this won't work.. I want the nav to be inline-block when the screen is 800px or smaller. Can anyone see where I have done something wrong?

I'm using @media screen and (max-width: 800px) too make sure when the CSS should change and that the nav should go from the left side with display:block, to be on the top with display:inline block (where the different links should be inline).

Snippet

nav {
  clear: left;
  text-decoration: none;
  float: left;
  width: 18%;
}
nav ul {
  list-style-type: none;
  margin-left: -40px;
}
nav a {
  text-decoration: none;
  color: black;
  padding: 10px;
  border: 1px solid brown;
  display: inline-block;
  width: 90%;
}
@media screen and (max-width: 800px) {
  nav {
    width: 100%;
    border: 1px solid pink;
  }
  nav a {
    float: none;
    display: inline-block;
    width: 20%;
  }
}

<nav>
  <ul>
    <li>
      <a href="index.html">home</a>
    </li>
    <li>
      <a href="contact.html">contavt</a>
    </li>
  </ul>
</nav>

Answer 1

You should apply

display: inline-block

to

nav li

rather than

nav a

nav
{
 clear: left;
 text-decoration: none;
 float: left;
 width: 18%;
}

nav ul
{
 list-style-type: none;
 margin-left: -40px;
}

nav a
{
 text-decoration: none;
 color: black;
 padding: 10px;
 border: 1px solid brown;
 display: inline-block;
 width: 90%;
}

@media screen and (max-width: 800px)
{
 nav
 {
  width: 100%;
  border: 1px solid pink;
 }

 nav li
 {
  float: none;
  display: inline-block;
  width: 20%;
 }
}

<nav>
  <ul>
    <li>
      <a href="index.html">home</a>
    </li>
    <li>
      <a href="contact.html">contavt</a>
    </li>
  </ul>
</nav>