No div.question in the exercise and wont let me continue!


#1



This is the instruction I have and the code is below I can't continue till I have completed this task but there is NO div.question in the style.css so even if I get the code it will not let me continue. Its just not possible to at add the 240px to div.question because it does not exist, I noticed when I got the code the 240px where added to .question in style.css but now I can't continue learning cause it has me F&&%ed up, can someone please help!

2.
Next, add 240 pixels on to the top of div.question (again, in style.css).


body {
  background-color: #FFF;
  margin: 0;
  padding: 0px 60px;
}

.header {
  background-color: #466995;
  border-bottom: 1px solid #466995;
  overflow-y: auto;
  width: 100%;
}

ul {
  margin: 30px auto;
  text-align: center;
}

li {
  color: #FFF;
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  text-align: left;
  font-weight: 300;
  text-transform: uppercase;
  padding: 0 40px;
}

li:hover {
  color: #DBE9EE;
}

h1 {
  color: #466995;
  font-family: 'Oswald', sans-serif;
  font-size: 32px;
  font-weight: 300;
  text-transform: uppercase;
}

h2 {
  color: #333;
  font-family: 'Varela Round', sans-serif;
  font-size: 26px;
  font-weight: 100;
  margin: 0 auto 40px auto;
}

h3 {
  color: #466995;
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
}

h4 {
  color: #466995;
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase
}

p {
  color: #333;
  font-family: 'Varela Round', sans-serif;
  font-size: 18px;
}

.welcome {
  background-color: #DBE9EE;
  box-sizing: border-box;
  padding: 40px;
  position: fixed;
  left: 0;
  top: 80px;
  text-align: center;
  width: 100%;
  z-index: 999;
}

.question {
  margin: 120px auto;
  position: relative;
  top: 240px;
  text-align: center;
}

.answer {
  border: 1px solid #466995;
  display: inline-block;
  height: 100px;
  margin: 20px;
  padding-top: 40px;
  width: 220px;
}

.answer:hover {
  background: #C0D6DF;
  color: #FFF;
}


#2

You're supposed to add it at the bottom with the provided selector, like so:


#3

I tried doing that, but still doesn't work. Are OP and I the only ones with this problem?? I can't get past this until I see what I'm doing wrong.

EDIT: Nvm got the answer: you just add " top: 240px;" underneath .question

But my question is, why does the answer include TOP when the lesson taught us that using the top property moves the element down, whereas BOTTOM does just the opposite?


#4

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