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
Christopher De Lette
Courses Plus Student 7,139 PointsNavigation in header offset from Header, not sure why? Need help please!
I am trying to build a simple, static webpage to build upon later as I learn more about HTML, CSS, JavaScript, etc. For some reason I can't figure out why the <h1> element and the navigation menu in my header are offset by a few pixels, causing the navigation menu to be slightly below the <h1> element. I have provided a screenshot to show what i'm trying to explain here:
Snippet of my HTML:
<header class="main-header">
<div class="container">
<h1 class="name"><a href="#">Oregon Trip 2017</a></h1>
<ul class="main-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</header>
Associated CSS
/* ++++++++++++++++++++++++++++++++++
Base Element Styles
++++++++++++++++++++++++++++++++++ */
* {
box-sizing: border-box;
}
body {
line-height: 1.6em;
background-color: #fff;
font-family: 'Varela Round', sans-serif;
}
p {
font-size: .95em;
margin-bottom: 1.5em;
}
h2,
h3,
a {
color: #DBF2F9;
}
h2,
h3 {
margin-top: 0;
}
a {
text-decoration: none;
}
/* ++++++++++++++++++++++++++++++++++
Base Layout Styles
++++++++++++++++++++++++++++++++++ */
/***** Navigation styles ******/
.name {
font-size: 1.25em;
}
.name,
.main-nav li {
text-align: center;
background: #fff;
margin-top: 6px;
margin-bottom: 6px;
}
.main-nav a {
color: #DBF2F9;
font-size: .95em;
text-transform: uppercase;
}
.name a,
.main-nav a {
padding: 10px 15px;
display: block;
}
/***** Layout Containers ******/
.container {
padding-left: 1em;
padding-right: 1em;
}
.main-header {
text-align: center;
background-color: #DBF2F9;
padding: 1.5em 0 1.5em 0;
margin-bottom: 30px;
}
.main-footer {
padding: 2em 0;
background-color: #DBF2F9;
text-align: center;
}
/***** Media Queries ******/
@media (min-width: 769px) {
.wrap {
min-height: calc(100vh - 100px);
}
.container {
width: 80%;
max-width: 1150px;
margin: 0 auto;
}
.name,
.main-nav,
.main-nav li {
display: inline-block;
}
.name {
width: 240px;
margin-right: -4px;
}
}
The odd thing to me is that if i increase the font size in the child anchor elements in the .main-nav class it will vertically line up the two perfectly.
Please help as I have no hair left at this point! :)
2 Answers
Flor Antara
12,372 PointsHi Christopher,
I couldn't see your screenshot, but copied your code over to a CodePen and could reproduce the issue.
See how it looks now: https://s.codepen.io/florantara/debug/ayLRJQ
You can see the code here: https://codepen.io/florantara/pen/ayLRJQ
Find what I changed from lines 62 to 77.
Flor Antara
12,372 PointsHi Christopher, sure!
It actually doesn't make a difference here.
I always put together display: inline-block; with vertical-align: top; as a habit. In case the font-size of any of those elements change, it'll keep the elements aligned as you want. (try it on the CodePen)
And take a look at this other Pen too: https://codepen.io/edge0703/pen/iHJuA
Christopher De Lette
Courses Plus Student 7,139 PointsAgain you rock! On to the next chapter :)
Thanks!
Chris
Christopher De Lette
Courses Plus Student 7,139 PointsChristopher De Lette
Courses Plus Student 7,139 PointsOne more question for you and THANK YOU so much for taking the time to answer my question. I noticed you changed the base layout for all size screens to display: inline-block for .name, .main-nav and added the vertical-align rule. What does the vertical-align rule set it's value to so that now they are both even? Hope that makes some sense as it does in my head :)
Chris