
Caspar Claessen
9,060 PointsNav 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
2 Answers

Alex Watts
8,396 PointsHi 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
5,739 PointsI was able to fix that issue by applying the clearfix class to my HTML <header> ... it worked, but is that bad practice?
Adam Futrell
11,976 PointsAdam Futrell
11,976 PointsWhen 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 theh1
element (class="name"
)?