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

CSS CSS Layout Basics CSS Layout Project Introducing the Project

Caspar Claessen
Caspar Claessen
9,060 Points
Posted by Caspar Claessen
Caspar Claessen
9,060 Points

Nav items not aligned

Fellow Treehouse-students,

I can't fix my nav items. They do not appear on the same line. I have tried to play around with the display: inline-block element but I haven't found a solution. Somebody who can help me align the 'Best City Guide' and the Navigation Items on the right?

Here is my workspace: https://w.trhou.se/dkbj2decx0

Looking forward to an answer!

Regards, Caspar Claessen

Adam Futrell
Adam Futrell
11,976 Points
Adam Futrell
Adam Futrell
11,976 Points

When you say that they do not appear on the same line, do you mean that the nav items (class="main-nav") do not appear on the same line as the h1 element (class="name")?

2 Answers

Alex Watts
Alex Watts
8,396 Points
Alex Watts
Alex Watts
8,396 Points

Hi Caspar,

By default any heading tags i.e. h1, h2 etc... have a set top and bottom margin. This can be seen by looking at the element in your browsers console. To resolve this issue you can remove its margin (see code below):

h1 {
 margin: 0px;
}

Make sure this code goes somewhere at the top of your CSS file :) I see you have set a margin just under your header for spacing. It would be best if you got rid of this and used padding instead (see below):

.main-header {
  text-align: center;
  /*GET RID OF THIS MARGIN :)*/
  margin-bottom: 30px;
 /*ADD THIS PADDING INSTEAD!*/
 padding-top: 30px;
 padding-bottom: 30px;
}

This code will add additional spacing above and below your header. P.S. You don't need the text-align: center; it does nothing.

Hope this helps! Your doing great!

Louise Rollins
Louise Rollins
5,739 Points
Louise Rollins
Louise Rollins
5,739 Points

I was able to fix that issue by applying the clearfix class to my HTML <header> ... it worked, but is that bad practice?