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

CSS CSS Layout Basics CSS Layout Project Column Layout with Media Queries

Can'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;
}

}

Steven Parker
Steven Parker
231,122 Points

Here's a video that explains how to make a workspace snapshot, then you just share the link address to it.

Thanks Steven! Here's the link to my workspace snapshot. Could you tell me what is causing the alignment issue above?

https://w.trhou.se/ptvassls8u

1 Answer

Steven Parker
Steven Parker
231,122 Points

They 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;
}

Thanks 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
Steven Parker
231,122 Points

Using 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!