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

Sam Bailey
Sam Bailey
6,777 Points

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
204,019 Points

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

Sam Bailey
Sam Bailey
6,777 Points

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
204,019 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;
}
Sam Bailey
Sam Bailey
6,777 Points

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
204,019 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!