title: What does this error in Sass mean? "Illegal nesting: Only properties may be nested beneath properties."
body: <p>This is my code</p>
  
  <pre><code>html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  }
  
  body {
  font-family: 'Open Sans';
  }
  
  .navigation {
  padding: 0;
  margin: 0;
  background: #333;
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%
  li {
      display: inline;
      padding: 5px 10px;
      a {
          color: #e1e1e1;
          text-decoration: none;
          a:hover{color: lighten(#e1e1e1, 20%);}
          }
      }
  }
  </code></pre>
  
  <p>But whenever I build it and refresh the webpage I get this error:</p>
  
  <pre><code>Syntax error: Illegal nesting: Only properties may be nested beneath properties.
          on line 23 of style.scss
  </code></pre>
  
  <p>here is the my css code with line numbers</p>
  
  <pre><code>18:     z-index: 999;
  19:     width: 100%
  20:     li {
  21:         display: inline;
  22:         padding: 5px 10px;
  23:         a {
  24:             color: #e1e1e1;
  25:             text-decoration: none;
  26:             a:hover{color: lighten(#e1e1e1, 20%);}
  27:         }
  28:     }
  </code></pre>
  
  <p>I guess it's the anchor tag that's creating the problem but I don't understand why. Theoretically it should work.</p>