why does my my css styling not applied to the html elements

Question

I copied a html code from codepen. When i run the code, it runs fine except that some of the css styling is not applied.When i inspect elements, i notice that some css stylings are crossed ( have a horizontal on them) . when i hover over it, it says "invalid property value".

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: #212121;

  &:visited {
    color: #212121;
  }
}

h1, h2 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: bold;
}

h1 {
  font-size: 38px;
  margin-bottom: 40px;
}

h2 {
  font-size: 22px;
  margin-bottom: 10px;
}

img {
  max-width: 100%;
}

.text-center {
  text-align: center;
}

.container {
  max-width: 1200px;
  margin: auto;
}
header {
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/cssgrid_triangles.svg');
  background-size: cover;
  color: white;

  .top-nav {
    display: flex;
    justify-content: space-between;
    padding: 40px 0;
    
  }
}
.button {
  border: 1px solid #212121;
  padding: 12px 40px;

  &:hover {
    color: #e9e9e9;
    background: #212121;
  }
}

.button-white {
  border: 1px solid #e9e9e9;
  color: #e9e9e9 !important;

  &:hover {
    color: #212121 !important;
    background: #e9e9e9;
  }
}

.section-description {
  width: 80%;
  margin: auto;
}

.button-container {
  margin: 80px 0;
}



.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 30px;
  padding-top: 20px;
  padding-bottom: 84px;

  .hero-image {
    padding-left: 60px;
  }

  h1 {
    font-size: 52px;
    margin-top: 50px;
  }

  p {
    margin: 40px 0 68px;
  }

  .button {
    margin-right: 14px;
  }
}

<header>
    <div class="top-nav container">
        <div class="logo">CSS Grid Example</div>
        <ul>
            <li><a href="#">Shop</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Cart</a></li>
        </ul>
    </div> <!-- end top-nav -->

    <div class="hero container">
        <div class="hero-copy">
            <h1>CSS Grid Example</h1>
            <p>A practical example of using CSS Grid for a typical website layout.</p>
            <div class="hero-buttons">
                <a href="#" class="button button-white">Button 1</a>
                <a href="#" class="button button-white">Button 2</a>
            </div>
        </div> <!-- end hero-copy -->

        <div class="hero-image">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/cssgrid_macbook-pro-laravel.png" alt="hero image">
        </div>
    </div> <!-- end hero -->
</header>

Here, im trying to get the nav-bar elements (shop, cart,about etc) to the right side. for that, justify-content: space-between is used. But when i run it in browser, the css for navbar is crossed. Can someone kindly tell whats wrong here. link to the codepen: https://codepen.io/drehimself/pen/GyVPgb?editors=1100

Answer 1

put the css file and html file in the same folder.

<link rel ="stylesheet" css/stylesheet.css>

Answer 2

Method 1 - Use Built-in Sass Compiler of Codepen

Try using built-in CSS compiler of code-pen. The option is available on top-right.

CSS with Sass Before Compilation

Pure CSS After Compilation

Method 2 - Use Sass Compiler locally

Install Sass globally using npm

npm install -g sass

Once Installed simply provide source and destination to sass compiler

sass source/stylesheets/index.scss build/stylesheets/index.css

Also take a look at Sass Documentation Here & Here

Answer 3

Thats because some of the css are not css actually they are called 'scss'.They need to be compiled to css first with a scss compiler.