Learn Sass (Lesson 4.nesting Selectors) problem (maybe bug?)

Get Help Sass
#1

<PLEASE USE THE FOLLOWING TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>
https://www.codecademy.com/en/courses/learn-sass/lessons/hello-sass/exercises/nesting-sass

<In what way does your code behave incorrectly? Include ALL error messages.>
I have two problems. (First one) So when i tried this lesson for the first time it told me i need to nest the following:

.slogan {
  position: absolute;
  border: 4px solid black;
  top: 200px;
  left: 25%;
  width: 50%;
  height: 200px;
  text-align: center;
}

I attempted it but i got a bit mixed up so i decided to restart the lesson so i can start from scratch
when i did so out of nowere came some code that wasent there the first time i tried the lesson

@import url(https://fonts.googleapis.com/css?family=Pacifico);
//Add variables here:
$translucent-white: rgba(255,255,255,0.3);


h1 {
  font-family: Roboto, sans-serif;
  text-align: center;
}

.banner {
  font-family: 'Pacifico', cursive;
  height: 400px;
  background-image: url("lemonade.jpg");  
  border : {
    top: 4px solid black;
    bottom: 4px solid black;
	}
  
  .slogan {
  	position: absolute;
  	border: 4px solid black;
  	top: 200px;
  	left: 25%;                                                #<------------This code wasn't here before#
  	width: 50%;
  	height: 200px;
    background-color: $translucent-white
    
    span {
  		position: absolute;
  		text-align: center;                     #<---------------------this too
  		line-height: 200px;
		}
	}
}

.container {
  text-align: center;
  font-family: 'Pacifico', cursive;
  
  .icon {
  	display: inline-block;
  	margin: 2%;
  	border: 4px solid black;
  	font-size: 32px;
    width: 300px;
		height: 300px;
	}
}

So basically what happened was that it added code for no reason, and my question is which .slogan do i use? do i remove the one the system gave me? or do i not write the code the instructions gave me?
(second problem) ok i put that aside and removed the one the system gave me and instead replaced it with the code the instructions told me to put in.Here is the code that it had:

@import url(https://fonts.googleapis.com/css?family=Pacifico);
//Add variables here:
$translucent-white: rgba(255,255,255,0.3);
$icon-square-length: 300px;
$standard-border: 4px solid black;

h1 {
  font-family: Roboto, sans-serif;
  text-align: center;
}

.banner {
  font-family: 'Pacifico', cursive;
  height: 400px;
  background-image: url("lemonade.jpg");
  border : {
  top: $standard-border;
  bottom: $standard-border;
  .slogan {
  position: absolute;
  border: 4px solid black;
  top: 200px;
  left: 25%;
  width: 50%;
  height: 200px;
  text-align: center;
}

  span {
  		position: absolute;
  		text-align: center;
  		line-height: 200px;
		}
	}                   #<------------line 34
}

.container {
  text-align: center;
  font-family: 'Pacifico', cursive;
  
  .icon {
  	display: inline-block;
  	margin: 2%;
  	border: $standard-border;
  	font-size: 32px;
    width: $icon-square-length;
		height: $icon-square-length;
	}
}

(I think i done it correctly)So when i press run a error message comes up saying:
Error: Invalid CSS after “}”: expected “}”, was “” on line 34 of main.scss >> } ^

Any help is appreciated. Thanks

#2

I’m having the same problem as well, but with mine i just have no idea where to put the banner text.

#3

You do have a little nesting problem there. Here is the skeleton for .banner:

.banner {
  // contents

  border : {
    // contents
  } // closes border

  .slogan {
    // contents

    span {
      //contents
    } // closes span
    
  } // closes .slogan

} // closes .banner
#4

This is odd, i clicked restart exercise to try something out and all steps were already completed for me… ???

#5

It does that, but it shouldn’t – it has previously been reported as a bug.

#6

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