title: External Stylesheet not loading
body: <p>I've been going through the exercises at <a href="https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_responsive" rel="nofollow noreferrer">https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_responsive</a> . When I do a local test site with that code, and the style copied into a css file, everything loads properly. But when I start to work on my own local site, using almost the same code, the external stylesheet will not load and I do not understand why. I'm coming back to this after a few months away, but I shouldn't be missing anything here.</p>
  <p>my html file:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;WIP&lt;/title&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width:device-width, initial-scale=1.0&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;index.css&quot;&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;ul class=&quot;topnav&quot;&gt;
      
      &lt;li&gt; &lt;a href=&quot;#menu&quot;&gt; Menu &lt;/a&gt;&lt;/li&gt;
      &lt;li&gt; &lt;a href=&quot;#contact&quot;&gt; Contact &lt;/a&gt; &lt;/li&gt;
      
  &lt;/ul&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>my CSS:</p>
  <pre><code>body (
      margin: 0;
      }
  
  * { 
      box-sizing:border-box;
      }
      
  @media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*=&quot;col-&quot;] {
      width: 100%;
    }
      
  
  /* responsive desktop column layouts */
  
  .col-1 {width: 8.33%; float: left; padding: 15px; border: 1px solid black;}
  .col-2 {width: 16.66%; float: left; padding: 15px; border: 1px solid black;}
  .col-3 {width: 25%; float: left; padding: 15px; border: 1px solid black;}
  .col-4 {width: 33.33%; float: left; padding: 15px; border: 1px solid black;}
  .col-5 {width: 41.66%; float: left; padding: 15px; border: 1px solid black;}
  .col-6 {width: 50%; float: left; padding: 15px; border: 1px solid black;}
  .col-7 {width: 58.33%; float: left; padding: 15px; border: 1px solid black;}
  .col-8 {width: 66.66%; float: left; padding: 15px; border: 1px solid black;}
  .col-9 {width: 75%; float: left; padding: 15px; border: 1px solid black;}
  .col-10 {width: 83.33%; float: left; padding: 15px; border: 1px solid black;}
  .col-11 {width: 91.66%; float: left; padding: 15px; border: 1px solid black;}
  .col-12 {width: 100%; float: left; padding: 15px; border: 1px solid black;}
  
  
  
  /*The columns inside a row are all floating to the left, and are therefore taken out of the flow of the page, 
  and other elements will be placed as if the columns do not exist. To prevent this, we will add a style that clears the flow:*/
  .row::after {
    content: &quot;&quot;;
    clear: both;
    display: table;
  }
  
  /* FONTS */
  @font-face {
      font-family: Italiana-Regular;
      src: url('fonts/Italiana-Regular.ttf');
      font-weight: 300;
      
  }
  
  @font-face {
      font-family: Italianno-Regular;
      src: url('fonts/Italianno-Regular.ttf');
      font-weight: 300;
      
  }
  
  @font-face {
      font-family: VesperLibre-Regular;
      src: url('fonts/VesperLibre-Regular.ttf');
      
  }
  
  
  /* nav */
  
  ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgb(195,38,45);
    display: inline-block;
  }
  
  ul.topnav li {float: left;}
  
  ul.topnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  </code></pre>