**Challenge:** Nest CSS with Sass

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**


<style type='text/scss'>
.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>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36

Challenge: Nest CSS with Sass

Link to the challenge:

2

In the future, please ask a question so we don’t have to dig.

But your problem is with your curly braces. When you cut and pasted, they got screwed up. If you develop good habits of formatting and indenting, these things will be easier to spot.

When I move one of your curly braces, your code passes for me.

3

Just to be clear, you have nested your p selector inside the h1 selector.

.blog-post {
  h1 {
    text-align: center;
    color: blue;

    p {
      font-size: 20px;
    }
  }
}

That would make the h1 a parent element with a p element inside it. The HTML in that case would need to look like this.

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

This is the HTML you have in the challenge.

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

The h1 and p elements are sibling elements. They are on the same nesting level. Both should be nested inside the .blog-post selector.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.