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?