title: Class wont work from CSS file but works in HTML file
body: <p>So I am building a website for myself and I am having some trouble with a class. My Html file is linked to my css file no problem because other bits of css are working but my class tag will not work.
  Here is the bit of relevant html</p>
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;ABCD Home&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;stylesheet1.css&quot; /&gt;
      &lt;style&gt;&lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;nav&gt;
        &lt;ul&gt;
          &lt;li&gt;
            &lt;a href=&quot;task_handler.php&quot;&gt; Task Handler &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href=&quot;grocery_list.php&quot;&gt; Grocery List &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href=&quot;3d_printers.php&quot;&gt; 3D Printer HUB &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href=&quot;store.php&quot;&gt; Store &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href=&quot;about.php&quot;&gt; About &lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;div class=&quot;.socials&quot;&gt;
        &lt;ul&gt;
          &lt;li&gt;
            &lt;a href=&quot;https://www.youtube.com/channel/UCbScAAcSVrM1JRjN3ougp8w&quot;&gt;
              YouTube
            &lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>And here is the bit of the css, the nav element works just fine so maybe I am using the class wrong but I thought the following css would work</p>
  <pre><code>nav {
    background-color: goldenrod;
    position: fixed;
    left: 0;
    right: 0;
    top: 5px;
    height: 30px;
    display: flex;
    align-items: center;
    box-shadow: 0 0 10px 0 black;
  }
  nav * {
    display: inline;
  }
  nav li {
    margin: 20px;
  }
  nav li a {
    color: black;
    text-decoration: none;
  }
  :global {
    .socials {
      background-color: goldenrod;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 5px;
      height: 30px;
      display: flex;
      align-items: center;
      box-shadow: 0 0 10px 0 black;
    }
    .socials * {
      display: inline;
    }
    .socials li {
      margin: 20px;
    }
    .socials li a {
      color: black;
      text-decoration: none;
    }
  }
  </code></pre>
  <p>I had initially declared it not as a global and it was not working so I have been troubleshooting. It doesn't seem to work either way</p>
  <p>If I put the class declarations exactly as they are in the head of my html and within style tags it works just fine. like so</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;ABCD Home&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;stylesheet1.css&quot; /&gt;
      &lt;style&gt;
        .socials {
          background-color: goldenrod;
          position: fixed;
          left: 0;
          right: 0;
          bottom: 5px;
          height: 30px;
          display: flex;
          align-items: center;
          box-shadow: 0 0 10px 0 black;
        }
        .socials * {
          display: inline;
        }
        .socials li {
          margin: 20px;
        }
        .socials li a {
          color: black;
          text-decoration: none;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;nav&gt;
        &lt;ul&gt;
          &lt;li&gt;
            &lt;a href=&quot;task_handler.php&quot;&gt; Task Handler &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href=&quot;grocery_list.php&quot;&gt; Grocery List &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href=&quot;3d_printers.php&quot;&gt; 3D Printer HUB &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href=&quot;store.php&quot;&gt; Store &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href=&quot;about.php&quot;&gt; About &lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;div class=&quot;.socials&quot;&gt;
        &lt;ul&gt;
          &lt;li&gt;
            &lt;a href=&quot;https://www.youtube.com/channel/UCbScAAcSVrM1JRjN3ougp8w&quot;&gt;
              YouTube
            &lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  <p>I don't see what's going on here.</p>
  <p>Sorry for any formatting issues this is my first question.</p>