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 Responsive Web Design and Testing Adjust the Profile Page and Header

Henry James
Henry James
698 Points
Posted by Henry James
Henry James
698 Points

My h1 and h2 elements are floated left but they still appear high on the page than the navigation elements

I have checked the margins in my first.css file are correct but still having issues getting the h1 and h2 elements to appear horizontally in line with the nav.

https://w.trhou.se/a8l6zm4iqz

2 Answers

Sam Baines
Sam Baines
4,315 Points
Sam Baines
Sam Baines
4,315 Points

Hi Henry - I'm not 100% sure if this is what you wanted but check out this Codepen I made using your workspace code - I edited your #logo ID and nav elements in the css with some other properties to get this inline effect. Hope this helps.

Elijah Gartin
Elijah Gartin
13,182 Points
Elijah Gartin
Elijah Gartin
13,182 Points

Hey Sam, so was adding the following css to the #logo the only thing you did to fix it? I think it might be helpful to discuss the exact changes you made so we don't have to scour the code to do a manual comparison. The Codepen result looks good to me, hopefully this is what Henry was looking for.

Changes that I found from your hints:

Changes/Additions on #logo id.

  float: left;
  margin: 2.5%;
  width: 45%;

Change/Additions to nav

  float: right;
  padding: 20px;
  margin: 2.5% 0;
  width: 45%;

Thanks, Elijah

Sam Baines
Sam Baines
4,315 Points
Sam Baines
Sam Baines
4,315 Points

Hey Elijah - I would normally have added some comments into the code that I changed I was just running short of time and trying to help the person out. It looks like you have highlighted the main changes I made anyway but I agree in future I should be more aware to show my working as if it were for others.

Elijah Gartin
Elijah Gartin
13,182 Points
Elijah Gartin
Elijah Gartin
13,182 Points

Totally understand busy! Glad we could tag team this one. :)

Aron Shane
Aron Shane
1,211 Points
Aron Shane
Aron Shane
1,211 Points

I commented out the width 45% is the responcive.css and fixed the issues

#logo { float: left; margin-left: 5%; text-align: left; /width: 45%;/ }