I was able to work out the floats but the navigation won't respond to the media queries.

I was able to make the floats work. The navbar even floats properly but it won't expand to match the width of the .name in mobile view. Maybe I've missed something?

/----------------------Navigation---------------------/

.name { font-size: 1.25em; }

.main-nav { list-style: none; }

.name, .main-nav li { text-align: center; background: #fff; margin-bottom: 6px; }

.name a, .main-nav a { padding: 10px 15px; text-align: center; display: block; }

.main-nav a { font-size: .95em; color: #3acec2; text-transform: uppercase; }

.main-nav a:hover { color: #093a58; }

/-------------Layout containers--------------/

.container { padding-left: 1em; padding-right: 1em; }

.main-header { padding-top: 1.5em; padding-bottom: 1.5em; background: #3acec2; margin-bottom: 30px; }

.main-footer { position: fixed; right: 0; bottom: 0; left: 0; text-align: center; padding: 2em 0; background: #d9e4ea; }

/===========================Media Queries=======================/

@media (min-width: 789px) {

.wrap {
    min-height: calc(100vh - 89px);
}

.container {
    width: 85%;
    max-width: 1150px;
    margin: 0 auto;
}

.main-nav {
    float: right;
}

.name,
.main-nav li {
    float: left;
}

.main-nav li {
    margin-left: 12px;
}

/*-------------Columns--------------*/

.column {
    float: right;
    padding-left: 1em;
    padding-right: 1em;
}

.primary {
    width: 60%;
}

.secondary {
    width: 40%;
}

/*-------------Images and clearfix-------------*/

.feat-img {
    width: 200px;
    float: left;
    margin-top: 5px;
    margin-right: 25px;
    margin-bottom: 25px;
    padding: 10px;
    border: solid 1px #d9e4ea;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}   

}