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 How to Make a Website CSS: Cascading Style Sheets Take a Mobile-First Approach

Posted by Alzee Inc
Alzee Inc
5,894 Points

SOLVED #logo is not working

Well this is my code, so when i try to call the " id="logo" ", for some reason is not working. well thanks you a lot¨ Update HTML code

<!DOCTYPE html> <html> <head>
<meta charset="utf-8"> <title>Xatruch League</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css">
</head> <body> <header > <a href="index.html" id="logo">
<h1>Xatruch League</h1> <h2>Season One</h2> </a> <nav> <ul> <li><a href="index.html"> Portofolio</a></li> <li><a href="About.html">About</a></li> <li><a href="Contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul> <li> <a href="Img/numbers-01.jpg"> <img src="Img/numbers-01.jpg" alt=""> <p>Xtruch League .</p> </a> </li> <li> <a href="Img/numbers-02.jpg"> <img src="Img/numbers-02.jpg" alt=""> <p>Teams.</p> </a> </li> <li> <a href="Img/numbers-06.jpg"> <img src="Img/numbers-06.jpg" alt=""> <p>Ladders.</p> </a> </li> <li> <a href="Img/numbers-09.jpg"> <img src="Img/numbers-09.jpg" alt=""> <p>Forums.</p> </a> </li> <li> <a href="Img/numbers-12.jpg"> <img src="Img/numbers-12.jpg" alt=""> <p>Contact meh.</p> </a> </li> </ul> </section> <footer> <a href="https://twitter.com/"><img src="Img/twitter-wrap.png" alt="Twitter Logo"></a> <a href="https://www.facebook.com/"><img src="Img/facebook-wrap.png" alt="Facebook Logo"> </a> <p>© 2015 Xatruch League</p> </footer> </div> </body> </html>

Update CSS Code

a {text-decoration: none;}

#wrapper {max-width: 940px; margin: 0 auto; padding: 0 5%;}

#logo {text-align: center; margin: 0; }

11 Answers

David Clausen
David Clausen
11,403 Points
David Clausen
David Clausen
11,403 Points

Did you add a # in front of logo? So it should look like #logo

#logo {
}
Alzee Inc
Alzee Inc
5,894 Points

yes did it and is still not working at all...

David Clausen
David Clausen
11,403 Points
David Clausen
David Clausen
11,403 Points

Then I believe it should work. Your margin won't take effect though as none is not a valid word. If you want to set it to none that is 0, if you want to be consistent with margin from the parent container then you set none to inherit, that will set it to inherit from parent. See if you change that if you get the desired effect.

Fred Sites
Fred Sites
11,151 Points
Fred Sites
Fred Sites
11,151 Points

To add to what David said... You can use just a tag name like h1 to apply css to all instances of that html tag. However, an ID will need to start with "#" and a class will start with "."

Keith Kelly
Keith Kelly
21,326 Points
Keith Kelly
Keith Kelly
21,326 Points

You must have posted this as I was typing. Didn't mean to repeat.

Keith Kelly
Keith Kelly
21,326 Points
Keith Kelly
Keith Kelly
21,326 Points

To expand on David's answer make sure you are using the id (#) and class (.) selectors before the id or class name. For the most part the only times you will not need to preface the selector is if you are calling a standard html tag such as body, nav, ul,...

Keith Kelly
Keith Kelly
21,326 Points
Keith Kelly
Keith Kelly
21,326 Points

I didn't pick up on the margin that calls 0 and none. Try this instead:

#logo {text-align: center; margin: 0;}
Alzee Inc
Alzee Inc
5,894 Points

still not working... i tried to retype the code as well and nothing

Fred Sites
Fred Sites
11,151 Points
Fred Sites
Fred Sites
11,151 Points

can you copy and paste your current css again? Is this on codepen or github? it may be easier to see everything, if available.

David Clausen
David Clausen
11,403 Points
David Clausen
David Clausen
11,403 Points

YEs please and make sure you wrap it like your code with

```css
CSS
PASTE
HERE
```

Also verify your file directory and file names.

Fred Sites
Fred Sites
11,151 Points
Fred Sites
Fred Sites
11,151 Points

I think its your margin: 0 none; if you want no margin, you can just have margin: 0 this applies a margin of 0 to every side. What you have may is likely causing the error. Did you mean to do margin: 0 auto; ?

Alzee Inc
Alzee Inc
5,894 Points
Alzee Inc
Alzee Inc
5,894 Points

well, this is how my mains css code looks like and is still not owrking at all, #logo {text-align:center; margin: 0 none;}

Alzee Inc
Alzee Inc
5,894 Points
Alzee Inc
Alzee Inc
5,894 Points

Just update the code + css code, also i verified all the files if they are in the right order and well still cant having the same problem

Fred Sites
Fred Sites
11,151 Points
Fred Sites
Fred Sites
11,151 Points

try this.. #logo h1 h2 {text-align: center; margin: 0;}

Alzee Inc
Alzee Inc
5,894 Points
Alzee Inc
Alzee Inc
5,894 Points

nothing, i tried before just to verify if the code is working and nothing.

David Clausen
David Clausen
11,403 Points
David Clausen
David Clausen
11,403 Points

Your CSS is working, here it is: http://jsfiddle.net/pvL9b989/2/

So if its working the only other reason is its not being referenced correctly. Or you aren't describing the issue to us. WHAT is not working?

double check that the file structure, is it exactly like this? Did you drag main.css into the css folder? http://i.imgur.com/3TEtbpb.png

Alzee Inc
Alzee Inc
5,894 Points

yes, every single file is in the right order but still the code don't recognize the id #logo, i just took some SS to show you http://i.imgur.com/Rcnt6ND.png?1 http://i.imgur.com/5xAYDXD.png?1

David Clausen
David Clausen
11,403 Points
David Clausen
David Clausen
11,403 Points

Whew thanks for the screen shot, that helped.

Your using HTML comments in the CSS,

<--! #Center and none are called keywords-->

it's what is messing it up, since its not a comment for CSS so it sees # and trys to do something.

Replace your css coments with /* */

So

/* #Center and none are called keywords */

also fix the comment <!-- el max widh es para...

<!-- --> these are not comments these are /* some text here */

Your css will work now. Full copy of CSS code will have fixed this sooner, and correct mark ups when posting

next time post:

```css
CODE HERE
```

    /* example when correct mark up is applied in the forum code highlights correctly */
    p {
        color: pink;
    }
Fred Sites
Fred Sites
11,151 Points
Fred Sites
Fred Sites
11,151 Points

I'm stumped so far. Start by eliminating the possibility that your html and css arent linked with something obvious. At the top of your css put body {background-color: red;} . Save everything, then refresh. Did this change the background color?

Alzee Inc
Alzee Inc
5,894 Points
Alzee Inc
Alzee Inc
5,894 Points

thank yout a lot!! that was messing my code :D

David Clausen
David Clausen
11,403 Points
David Clausen
David Clausen
11,403 Points

No problem, this post will confuse people who search, if you don't mind editing your post with the full CSS you had and add EDIT: or SOLVED: at the bottom with how it was solved. It will help people who google or search the forum and see your post and find the solution easier since it isn't present in your original post and the discussion probably a bit confusing now lol.

If you have anymore issue feel free to come back to the forum. Learning can be tough at first, so many details. Take it easy!