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

HTML How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Posted by Abdul Khan
Abdul Khan
2,469 Points

Problems 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!

Dustin Matlock
Dustin Matlock
33,856 Points

Could you post your CSS?

Posting Code to the Treehouse Forum

4 Answers

Jonathan Perdomo
seal-mask
.a{fill-rule:evenodd;}techdegree
Jonathan Perdomo
Python Development Techdegree Student 11,506 Points
Jonathan Perdomo
.a{fill-rule:evenodd;}techdegree
Jonathan Perdomo
Python Development Techdegree Student 11,506 Points

Did you adjust the h2 and h1?

h1 {
   font-size: 2.5em;
}

h2 {
   font-size: 0.825em;
   margin-bottom: 20px;
}
Adrian Clark
Adrian Clark
18,889 Points
Adrian Clark
Adrian Clark
18,889 Points

Without 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
Abdul Khan
2,469 Points
Abdul Khan
Abdul Khan
2,469 Points

i 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
Katherine Landreth
3,527 Points
Katherine Landreth
Katherine Landreth
3,527 Points

I 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
Katherine Landreth
3,527 Points

Not 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;}