Sass(y) Types Help

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

Hello everyone. I’m very confused on this one. I don’t see how I’m nesting incorrectly. Any help would be appreciated. Thank you.
<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/types

<In what way does your code behave incorrectly? Include ALL error messages.>
I’m confused regarding this error message.

“Did you nest and apply the properties to .icon?”

```

@import url(https://fonts.googleapis.com/css?family=Pacifico);
$translucent-white: rgba(255,255,255,0.3);
$icon-square-length: 300px;
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%;
width: 50%;
height: 200px;
background-color: $translucent-white;

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

}

.container {
text-align: center;
font-family: ‘Pacifico’, cursive;

.icon {
$icon-square-length: 300px;
display: inline-block;
width: $icon-square-length;
height: $icon-square-length;
margin: 2%;
border: 4px solid black;
font-size: 32px;
}

<do not remove the three backticks above>

I’m getting the same error message for my code too! I can’t see how I haven’t done that.

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

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%;
  	width: 50%;
  	height: 200px;
    background-color: $translucent-white;
    
    span {
  		position: absolute;
  		text-align: center;
  		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: $icon-square-length;
    height: $icon-square-length;
	}
}

The only thing I would suggest is that you’ve got

$icon-square-length: 300px;

twice: once in the variables at the beginning and once in your .icon selector. I don’t know if you need the second one (the one in the .icon selector), but I doubt that’s what’s causing the error message.

@lornafrankel i think your code is True, reload the page and test again. your code with instructions is true

@firstboy000 I have tried reloading the page, and even restarting my computer and it still didn’t work. I submitted a bug report as the ‘Get Code’ and ‘Reset Exercise’ functions are also not working.

@rubymaster70094 Have you had any luck with yours?

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