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

}