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 trialScott Kaplan
708 PointsUnevenly spaced nav elements
Following along in the Polish the Navigation and Footer section, I added font weight and padding as per instructions, but my page looks different than the instructors. The "Portfolio" section seems to have more space around it, or is pushing the other links to the right.
Here is my Navigation CSS:
nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }
nav ul { list-style: none; margin: 0 10px; padding: 0; }
nav li { display: inline-block; }
nav a { font-weight: 800; padding: 15px 10px; }
Scott Kaplan
708 PointsTHanks Wayne:
HTML and CSS below. Let me know if I'm still screwing it up the markdown process!
<header>
<a href="index.html" id="logo">
<h1>Scott Kaplan</h1>
<h2>Copywriter</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Portfolio<a/></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Alegreya Sans SC', sans-serif;
margin: 15px 0;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-size: 0.75em;
margin: -5px 0 0;
font-weight: normal;
}
/***********************
NAVIGATION
************************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
2 Answers
Wayne Priestley
19,579 PointsHey Scott,
If you remove the padding here.
nav a {
font-weight: 800;
}
And add a margin left here.
nav li {
display: inline-block;
margin-left: 20px;
}
Then things should be good.
Nichelle Segar
9,857 PointsThis was driving me nuts, too. I started experimenting with the nav margin and came up with this:
nav { text-align: center; padding: 10px 0; margin: 20px 0 0 -40px; }
The "40" centered the navigation links almost perfectly under my name in the header. Hope that works for you.
Wayne Priestley
19,579 PointsWayne Priestley
19,579 PointsHi Scott,
Could you please post your html and css so we can take a look and help you out.
Here is a link to explain how to use Markdown to post your code How to post code
If you look at the bottom of the box when your typing a reply you will see Markdown Cheatsheet that will also explain how to post your code.