im trying to make a responsive website but there is a gap in one space i cant figure out how to get rid of it please help
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
</header>
<nav></nav>
<main class="row">
<div id="scondaryNav" class="col-md-2"></div>
<div class="col-md-8">
<div class="container">
<div class="row">
<h2>Our Mission Statement</h2>
<p>The Cedar Crest Society exists to ensure that members of our community acquire full citizenship; including the rights, obligations and privileges attainable by all citizens.</p>
</div>
</div>
</div>
</main>
<footer>
</footer>
</body>
</html>
*{box-sizing:border-box; margin:0; padding:0}
body{background:orange}
.container{padding:0 15px; margin:0 auto}
.row::after { content: ""; clear: both; display: block}
/*mobile first*/
/*start of header element*/
header{height:60px; background:blue}
/*end of header element*/
/*start of navigation element*/
nav{height:60px; background:yellow}
/*start of scondary Navigation*/
#scondaryNav.col-md-2{background:#c000ff; height:100vh; position:relative;
bottom:60px;}
/*start of scondary Navigation*/
/*end of navigation element*/
/*start of main element*/
/*end of main element*/
/*start of footer element*/
footer{height:60px; background:black}
/*end of footer element*/
/*mobile phones and other small devices*/
[class*="col-"] { float: left; padding: 15px; width: 100%}
/*media Queries*/
/*small screens*/
@media (min-width: 768px) {
.container {width: 750px}
/*resume page*/
header main h4{float:left; position:relative; left:27%;}
/*main colum set small screens*/
.col-sm-1 {width: 8.33%;}
.col-sm-2 {width: 16.66%;}
.col-sm-3 {width: 25%;}
.col-sm-4 {width: 33.33%;}
.col-sm-5 {width: 41.66%;}
.col-sm-6 {width: 50%;}
.col-sm-7 {width: 58.33%;}
.col-sm-8 {width: 66.66%;}
.col-sm-9 {width: 75%;}
.col-sm-10 {width: 83.33%;}
.col-sm-11 {width: 91.66%;}
.col-sm-12 {width: 100%;}
}
@media (min-width: 992px) {
.container {width: 970px;}
/*resume page*/
header main h4{float:left; position:relative; left:35%;}
/*main colum set medium screens*/
.col-md-1 {width: 8.33%;}
.col-md-2 {width: 16.66%;}
.col-md-3 {width: 25%;}
.col-md-4 {width: 33.33%;}
.col-md-5 {width: 41.66%;}
.col-md-6 {width: 50%;}
.col-md-7 {width: 58.33%;}
.col-md-8 {width: 66.66%;}
.col-md-9 {width: 75%;}
.col-md-10 {width: 83.33%;}
.col-md-11 {width: 91.66%;}
.col-md-12 {width: 100%;}
}
@media (min-width: 1200px) {
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
</header>
<nav></nav>
<main class="row">
<div id="scondaryNav" class="col-md-2"></div>
<div class="col-md-8">
<div class="container">
<div class="row">
<h2>Our Mission Statement</h2>
<p>The Cedar Crest Society exists to ensure that members of our community acquire full citizenship; including the rights, obligations and privileges attainable by all citizens.</p>
</div>
</div>
</div>
</main>
<footer>
</footer>
</body>
</html>
*{box-sizing:border-box; margin:0; padding:0}
body{background:orange}
.container{padding:0 15px; margin:0 auto}
.row::after { content: ""; clear: both; display: block}
/*mobile first*/
/*start of header element*/
header{height:60px; background:blue}
/*end of header element*/
/*start of navigation element*/
nav{height:60px; background:yellow}
/*start of scondary Navigation*/
#scondaryNav.col-md-2{background:#c000ff; height:100vh; position:relative;
bottom:60px;}
/*start of scondary Navigation*/
/*end of navigation element*/
/*start of main element*/
/*end of main element*/
/*start of footer element*/
footer{height:60px; background:black}
/*end of footer element*/
/*mobile phones and other small devices*/
[class*="col-"] { float: left; padding: 15px; width: 100%}
/*media Queries*/
/*small screens*/
@media (min-width: 768px) {
.container {width: 750px}
/*resume page*/
header main h4{float:left; position:relative; left:27%;}
/*main colum set small screens*/
.col-sm-1 {width: 8.33%;}
.col-sm-2 {width: 16.66%;}
.col-sm-3 {width: 25%;}
.col-sm-4 {width: 33.33%;}
.col-sm-5 {width: 41.66%;}
.col-sm-6 {width: 50%;}
.col-sm-7 {width: 58.33%;}
.col-sm-8 {width: 66.66%;}
.col-sm-9 {width: 75%;}
.col-sm-10 {width: 83.33%;}
.col-sm-11 {width: 91.66%;}
.col-sm-12 {width: 100%;}
}
@media (min-width: 992px) {
.container {width: 970px;}
/*resume page*/
header main h4{float:left; position:relative; left:35%;}
/*main colum set medium screens*/
.col-md-1 {width: 8.33%;}
.col-md-2 {width: 16.66%;}
.col-md-3 {width: 25%;}
.col-md-4 {width: 33.33%;}
.col-md-5 {width: 41.66%;}
.col-md-6 {width: 50%;}
.col-md-7 {width: 58.33%;}
.col-md-8 {width: 66.66%;}
.col-md-9 {width: 75%;}
.col-md-10 {width: 83.33%;}
.col-md-11 {width: 91.66%;}
.col-md-12 {width: 100%;}
}
@media (min-width: 1200px) {
}
