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 trialAbdul Khan
2,469 PointsProblems with alignment in header (desktop version of site)
Hello,
I have been following this track with no problems and my site was coming along well. However, I got to the final stage in making the site responsive and finishing it when I ran into a problem.
I would like the navigation and the logo to be displayed inline with each other at the centre of the header. What is currently happening is that the logo goes to the top right of the header and the navigation is going to the bottom left.
I have floated the logo left and the navigation right.
To solve this is thought this would work:
logo {
clear: right; }
this did not seem to work.
and help would be greatly appreciated, thank you sooo much!
4 Answers
Jonathan Perdomo
Python Development Techdegree Student 11,506 PointsDid you adjust the h2 and h1?
h1 {
font-size: 2.5em;
}
h2 {
font-size: 0.825em;
margin-bottom: 20px;
}
Adrian Clark
18,889 PointsWithout looking at the code, it may simply be a case of a missing character in the selector. You can't select the logo by just saying "logo { }" since "logo" isn't part of HTML's vocabulary, but I'm guessing logo is an element with either a class or an id of "logo" given to it. To get to it you'd have to say ".logo { }" (period in front) if the element has a class of logo or "#logo { }" (pound sign/hash tag in front) if the element has an id of logo.
Abdul Khan
2,469 Pointsi did type #logo {} , the forum message box just auto changed it when I posted the question?, here is the responsive.css:
'''css
/*************************** PAGE: PORTFOLIO ****************************/
#gallery li { width: 28.333333% }
#gallery li:nth-child(4n) { clear:left; }
/*************************** PAGE: ABOUT ****************************/
.profile-photo { float:left; margin:0 5% 80px 0; }
/*************************** PAGE: HEADER ****************************/
nav { background:none; float:right; font-size:1.5em; margin-right:5%; text-align:right; width:45%; }
nav a, nav a:visited { color:#636769; }
#logo { float:left; margin-left:5%; text-align:left; width:45%; }
h2 { margin-bottom:20px; }
header { border-bottom:5px solid #636769; }
Katherine Landreth
3,527 PointsI think I might need to see the HTML and the actual page to really understand what's happening, but here's an idea off the top of my head. Have you tried floating both the nav and the logo to the left? This is how inline elements are usually aligned next to one another as far as I've seen. For example
nav{
float:left;
}
#logo{
float:left;
}
If you have a link to the page that would be super helpful.
Katherine Landreth
3,527 PointsNot sure what happened there... thought I used the backticks appropriately but markdown seems to not like what I did. :(
nav{float:left;}
#logo{float:left;}
Dustin Matlock
33,856 PointsDustin Matlock
33,856 PointsCould you post your CSS?