Nest CSS with Sass not working

Nest CSS with Sass not working
0

#1

Tell us what’s happening:
My code is not working.

Your code so far


<style type='text/sass'>

  .blog-post {
       h1 { 
        text-align: center;
          p {
            color: blue;
            font-size: 20px;
        }
      }
    }
  
  
</style>

<div class="blog-post">
  <h1>Blog Title</h1>
  <p>This is a paragraph</p>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; rv:60.0) Gecko/20100101 Firefox/60.0.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/sass/nest-css-with-sass/


#2

p shouldn’t be nested in h1, since the <p> is not a child element of the <h1>.


#3

SOLUTION:


<style type='text/sass'>
 .blog-post { 
    h1 { 
      text-align: center; 
      color: blue; }
  p { font-size: 20px; } 
  
  }
  
</style>

<div class="blog-post">
  <h1>Blog Title</h1>
  <p>This is a paragraph</p>
</div>