Help! Nesting Selectors


#1




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;
}


#2

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