<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/courses/learn-sass/projects/refactor-scss
<In what way does your code behave incorrectly? Include ALL error messages.>
I’m trying to nest my selectors, i’m hitting ‘save’ as i go so i can see the changes happening as i make them… However the selectors are not behaiving correctly. In pit, the h4 & ul are displaying as if there was no css in there, so not central and has the bullet points. Where am i going wrong?
$white-color: #ffffff;
$pink-color: #FFCFCF;
html, body {
margin: 0;
font-family: Arial;
color: $white-color;
}
p, a {
font-size: 0.75rem;
}
.container {
min-height: 100%;
display: flex;
.nav {
width: 15%;
min-width: 140px;
color: $pink-color;
padding-top: 55px;
padding-right: 30px;
text-align: center;
.h4 {
-webkit-margin-before: 0;
margin-left: 50px;
}
.ul {
list-style: none;
}
}
.main {
width: 85%;
min-height: 750px;
min-width: 600px;
background-color: $pink-color;
.img {
padding-left: 30px;
height: 350px;
width: 550px;
}
}
}
.main ul {
padding-left: 30px;
}
.main li {
font-size: 0.85rem;
}
.main h1 {
font-size: 62px;
-webkit-margin-before: 0;
padding-top: 40px;
padding-left: 30px;
}
.main video {
padding-left: 30px;
}
.main p {
padding-left: 30px;
width: 55%;
min-width: 550px;
}
.main a {
color: inherit;
padding-left: 30px;
text-decoration: none;
}
.main a:hover {
text-decoration: underline;
}
<do not remove the three backticks above>