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 trialSam Bailey
8,425 PointsCan't get navigation to display on same line as Best City Guide
I can't figure out why my navigation menu won't display on the same line as the title, despite using the same method as Guil in the video to float both items. Can anyone advise what is wrong?
(I'm also not sure how to link a snapshot of my code, so if anyone could tell me how to do that I'd be grateful. For now I have pasted my code below.)
/* ================================= Base Element Styles ==================================== */
- { box-sizing: border-box; }
body { font-family: 'Varela Round', sans-serif; line-height: 1.6; color: #3a3a3a; }
p { font-size: .95em; margin-bottom: 1.8em; }
h2, h3, a { color: #093a58; }
h2, h3 { margin-top: 0; }
a { text-decoration: none; }
img { max-width: 100%; }
/* ================================= Base Layout Styles ==================================== */
/* ---- Navigation ---- */
.name { font-size: 1.25em; }
.main-nav {
}
.name a, .main-nav a { text-align: center; display: block; }
.main-nav a { font-size: .95em; color: #3acec2; text-transform: uppercase; }
.main-nav a:hover { color: #093a58; }
/* ---- Layout Containers ---- */
.banner { color: #fff; background: #3acec2; text-align: center; padding: 1rem 0; }
.main-footer { background: #d9e4ea; padding: 2em 0; margin-top: 30px; text-align: center; }
/* ---- Page Elements ---- */
.logo { width: 190px; }
/* ================================= Media Queries ==================================== */
@media (min-width: 769px) {
.primary { width: 50%; padding: 0 1rem; float: left; }
.secondary { width: 50%; float: left; }
/* ---- Float clearfix ---- */
.clearfix::after {
content: " ";
display: table;
clear: both;
}
}
@media (min-width: 1020px) {
.header-div { width: 75%; margin: 0 auto; }
.name { float: left; }
.main-nav { float:right; }
.main-nav li { display:inline-block; margin-left: 15px; }
.primary { width: 40%; padding: 0 1rem; }
.secondary { width: 30%; }
.tertiary { width: 30%; }
.col { float: left; }
.allColumns { margin: 0 auto; width: 80%; max-width: 1150px; padding: 1rem 0; }
.clearfix::after {
content: " ";
display: table;
clear: both;
}
}
Sam Bailey
8,425 PointsThanks Steven! Here's the link to my workspace snapshot. Could you tell me what is causing the alignment issue above?
1 Answer
Steven Parker
231,122 PointsThey actually are on the same "line", but the h1 is a bit larger and has margins.
You can visibly line them up several ways, one would be to give the ul a top margin:
.main-nav {
margin-top: 1em;
}
Sam Bailey
8,425 PointsThanks so much Steven! If it's not too much trouble, would you mind explaining how you knew/identified that a top margin of 1em would be the correct amount of space to resolve the problem?
Steven Parker
231,122 PointsUsing the browser developer tools (I happen to use Chrome, but most browsers have them), I examined the sizes and positions of the heading, the ul, and the container they shared. And this is just one of many ways to address the issue, but a simple one.
Glad I could help, and happy coding!
Steven Parker
231,122 PointsSteven Parker
231,122 PointsHere's a video that explains how to make a workspace snapshot, then you just share the link address to it.