my columns are not floating to left or right

/* ================================= Base 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.5em; }

h2, h3, a { color: #093a58; }

h2, h3 { margin-top: 0; }

a { text-decoration: none; }

/* ================================= Base Layout Styles ==================================== */

/* ---- Navigation ---- */

.name { font-size: 1.25em; }

.name, .main-nav li { text-align: center; background: #fff; margin-top: 6px; 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 { 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;
}

.feat-img {
    width: 300px;
    float: left;
    margin-top: 5px;
    margin-right: 35px;
    margin-bottom: 15px;
    padding: 10px;
    border: solid 1px lightgrey;

}
.main-nav{
    float: right;
}
.name{
    float : left;
}

.main-nav li{ float : left; } .clearfix::after{ content:""; display: table; clear:both; } /* column section*/ col { float: right; padding-left: 1em; padding-right: 1em; }

.primary {
    width: 60%;
}

.secondary {
    width: 40%;
}


/*p {
    border: solid 1px red;
}

*/