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
Denise Greer
5,026 PointsWhat's wrong, header logo, nav not lining up, no color border?
Logo and navigation will not line up and I'm not getting the header bottom color border to appear like in the How to Build a Website video. Where's my error?
Responsive CSS...
/***************************************** HEADER ******************************************/
nav { background: none; float: right; font size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }
#logo { float: left; margin-left: 5%; text-align: left; width: 45%; }
h1 { font-size: 2.5em; }
h2 { font-size: 0.825em; margin-bottom: 20px; }
header { border-bottom: 5 px solid #800909; margin-bottom: 60px; }
Main CSS... /***************************************** 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: 'Exo 2', 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; 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; }
2 Answers
Kristopher Van Sant
Courses Plus Student 18,830 PointsSome thoughts to what could be wrong....
- You're missing the # id selector before logo in your main.css
- Your nav's padding in main.css is missing the value 0 for the right and left padding. padding: 10px 0;
As for the the bottom border color make sure you've selected a different color value, so that it's not the same color as the background.
Hope this helps some!
Denise Greer
5,026 PointsThank you, thank you! You rock! It works now. It's so funny that I can stare at it million times and miss the smallest thing.
Kristopher Van Sant
Courses Plus Student 18,830 PointsHooray! Yup, it's always the smallest of things! :) Whenever I'm stuck I try to step away from the screen for a bit and come back to the issue later with fresh eyes.
Kristopher Van Sant
Courses Plus Student 18,830 PointsKristopher Van Sant
Courses Plus Student 18,830 PointsHi! Can you please do a snapshot of your workspace and post the link here? To do a snapshot click the camera icon in the upper right corner of the your workspace near the preview icon. Click on the snapshot, which will open up in a window and copy the link and paste it here. That would be really helpful for debugging! :)