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!
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
Nikki Turrisi
15,095 PointsSo my navigation bar is messed up, doesn't reflect css at all, esp. margin/padding/text color
I don't know why this is the only element that is not picking up my css. It is uneven on the page, even though it is in inline-block display. The color is off as well as the centering and I cannot seem to find what I did wrong. I looked at his css compared to mine, and its identical. Could I have missed something in the html?
3 Answers
Robert Komaromi
11,926 PointsCan you post your code, or give a link to Plunker / CodePen / JSFiddle? Your problem may arise for any number of reasons...
- Class name in HTML and CSS don't match (check for any typos)
- You missed a dot in your CSS for the class name (check for any syntax errors)
- Your CSS properties are unexpectedly being overwritten (check the order of your CSS and the specificity of your CSS selectors)
You can run your HTML through the HTML validator and your CSS through the CSS validator or through CSS Lint to help you find problems.
jonathankavalos
3,523 PointsIt could rendering this way for a variety of reasons, such as incorrectly nested elements, declarations overriding each other or with the same name, or even browser issues. Can you give us a link or show some code you're using?
Robert Komaromi
11,926 PointsNikki, we can't actually view your workspace - following the link you posted gives us a 404 error. It's best to post your code here, or if there is a lot of code (and maybe more than one file), it's better to post it to Plunker, CodePen or JSFiddle (or another place, if you prefer).
Robert Komaromi
11,926 Pointsjonathankavalos makes a good point about browsers. Different browsers use different layout engines. It's a good idea to see what your content looks like in different browsers. I usually just test in recent versions of IE, Firefox, Chrome and Safari - but there are many good tools to help to achieve consistency among different web browsers and devices.
Guil Hernandez
Treehouse TeacherHi Nikki,
Can you please post the CSS you wrote, or include a screenshot so I can take a look at your code? Thanks! :)
Nikki Turrisi
15,095 Points/****************************** GENERAL ******************************/
body { font-family: 'Open Sans', sans-serif; }
wrapper{
max-width: 940px; margin: 0 auto; padding: 0 5%; clear: both; }
a { text-decoration: none; }
img { max-width: 100%; }
h3 { margin:0 0 1em 0; }
/****************************** HEADING ******************************/
header { float:left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }
logo{
text-align: center; margin: 0; }
h1 { font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }
h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal;
}
/****************************** NAVIGATION ******************************/
nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }
nav ul {
list-style: none;
margin: 0 10px:
padding: 0;
}
nav li { display: inline-block; }
nav a { font-weight: 800; padding: 15px 10px; }
/****************************** FOOTER ******************************/
footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }
.social-icon { width: 20px; height: 20px; margin: 0 5px; }
/****************************** PAGE: PORTFOLIO ******************************/
gallery {
margin: 0; padding: 0; list-style: none; }
gallery li {
float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }
gallery li a p {
margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7;
}
/****************************** PAGE: ABOUT ******************************/
.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
/****************************** PAGE: CONTACT ******************************/
.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }
.contact-info a { display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px; }
.contact-info li.phone a { background-image: url('../img/phone.png'); }
.contact-info li.mail a { background-image: url('../img/mail.png'); }
.contact-info li.twitter a { background-image: url('../img/twitter.png'); }
/****************************** COLORS ******************************/
/* site body */ body { background-color: #fff; color: #999; }
/* green header */
header {
background: #6ab47b;
border-color: #599a68;
}
/* nav background on mobile devices */ nav { background: #599a68; }
/* logo text */ h1,h2 { color: #fff; }
/*links */ a { color: #6ab47b; }
/* navigation links */ nav a, nav a:visited { color: #fff; }
/* selected nav link */
nav a.selected, nav a:hover {
color: #32673f;
}
Robert Komaromi
11,926 PointsPlease format your code using Markdown. There is a link to the Markdown Cheatsheet below the comment box. Wrap your code between
```css
and
```
And can you also post your HTML?
Some problems with your CSS:
You should prefix
wrapper,logoandgallerywith a dot (.) or hash/pound symbol (#) to indicate a class name or an ID, respectivelyUnder your NAVIGATION heading, you used a colon instead of a semicolon for
nav ul. You currently havenav ul { list-style: none; margin: 0 10px: padding: 0; }. You should have a semicolon aftermargin: 0 10px, not a colon.
After these changes, you will have valid CSS.
Nikki Turrisi
15,095 PointsNikki Turrisi
15,095 PointsHey, thanks so much for the advice! I added my code and they found about 1,000 mistakes! So... being a newbie I kind of just need help with this specific problem, so I don't become overwhelmed. But thank you so very much for the links you provided, I am sure they will be invaluable resources in the future!
-NRT
Robert Komaromi
11,926 PointsRobert Komaromi
11,926 PointsYou're welcome!
1000s of mistakes!? Do you even have 1000 lines of code? Even though you're just starting off, it may be a good way for you to learn CSS and write it the right way. Warnings are ok to ignore, but definitely look at any errors.