Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Garrett Goehring
Garrett Goehring
7,884 Points

Selectors won't work

I am trying to format the .box divs but nothing is working. I have checked and the browser is still changing it when I edit the ,column ones, but for some reason the styling won't apply. Here is the code:

<!DOCTYPE html>
<html>
<head>
  <link href='http://fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="start.css">
</head>
<body>
<div id="container">
  <div id="left" class="column">
    <div id="22" class="box"><p>Edit Your Flavor Profile</p></div>
  </div>
  <div id="middle" class="column">
    <div id="quizb" class="box">Take the Quiz</div>
  </div>
  <div id="right" class="column">
    <div id="searchb" class="box">Search Restaurants by Name</div>
  </div>
</div>
</body>
</html>

And the CSS

#container{
  height:500px;
  width:100%;
  top:80px;
  position:absolute;
  z-index:1;
}

.column{
  height:300px;
  width: 33%;
  border-right: 3px solid black;
  position:relative;
  margin:0;
  top: 100px;
  display:inherit;
}

#left{
  left: -5px
}
#middle{
  left:33%;
  top:-200px
}

#right{
  left:67%;
  top:-500px}
}

.box, #22{
  background:red;
  height:30%;
  width:20%}

2 Answers

Robert Ho
PLUS
Robert Ho
Courses Plus Student 11,383 Points
Robert Ho
Robert Ho
Courses Plus Student 11,383 Points

I noticed that you are missing some semi-colons and have added some closing brackets when not necessary beginning with the #left selector. The #left { left: -5px} is missing a closing semi-colon.

The #middle selector is missing a semi-colon after the top property. The #right selector has a top property that is closed with a closing bracket inside of a semi-colon. The .box and #22 is missing a semi-colon at the end of the width property.

Here's how it should look like:

 #left {
     left: -5px;
  }
 #middle {
    left:33%;
    top:-200px;
  }

 #right {
    left: 67%;
    top: -500px;
  }

.box, #22 {
   background:red;
   height:30%;
   width:20%;
 }

Hope this helps.

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Garret,

In addition to all the fixes Robert Ho mentioned you have an id beginning with a number which isn't valid.

<div id="22" class="box">

Change that to something else and the corresponding selector in the css.