My secondary-content doesn’t display with a height of 100%

html,
body,
.main-wrapper,
.col{
    height: 100%;/*calculate based on the parent container*/
}

/* Page Styles
================================ */


body{
    background-color: #edeff0;
    font:normal 1.1em/1.5 sans-serif;
    color: #222;


}
* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
html,
body,
.main-wrapper,
.col{
    height: 100%;/*calculate based on the parent container*/
}

/*.main-wrapper{
    width: 90%;keep it from too wide
    margin: auto;/*center align the web page*/



/* Layout Element Colors
================================ */

.main-header       { background-color: red; }
.main-logo         { background-color: #5fcf80; }
.main-nav li       { background-color: #3f8abf; }
.primary-content   { background-color: #caebf6; }
.secondary-content { background-color: #bfe3d0; }
.main-footer       { background-color: #b7c0c7; }

/* Header, Banner and Footer Layout
================================ */

.main-header{
    padding: 20px;
    display: table;/*kind life a inline element*/
    width: 100%;
    min-height: 200px;

}
.main-banner{
    background: #ebedee;
    text-align: center;
    padding: 35px 15px;
}
.main-logo,
.main-nav,
.main-nav li{
    display: inline-block;/*takes only th espace they nned so can add more on the sam eline*/
}

.main-logo,
.mian-nav{
    display: table-cell;
    vertical-align: middle;

}

.main-logo{
    margin-right:15px;

}
.main-nav{
    padding: 50px;
}
.main-logo,
.main-nav li{
    border-radius: 5px;
}
.main-nav li{
    /*margin-right: -5px;fixed the space between li*/
    margin-right:10px;
}



.main-logo a, 
.main-nav a {
    color: white;
    text-decoration: none;
    display: block;
    text-align: center;
    padding: 10px 20px;

}

.main-footer{
    text-align: center;
    padding: 20px;
}

/*Column Layout
===================================*/
.col{
    padding: 20px;
    display: inline-block;
    margin-right: -5px;/* fix margin collapses*/
    vertical-align: top;/*fixed the 2 content posiitoned at the bottom.*/
}
.primary-content{
    width: 60%;
}

.secondary-content{
    width: 40%;
}
/*Mdia Queries
===================================*/
@media(max-width:768px){
    .main-logo,
    .main-nav,
    .main-nav li,
    .col,{
        display:block;
        width: initial;
        height: initial;
        margin: initial;

    }

    .main-nav{
        padding-left: initial;
    }
    .main-nav li{
        margin-top: 15px;
    }
    .main-banner{
        display: none;
    }
}