ok why is my css doing this

Discussion in 'Computer Programming, Emulation, and Game Modding' started by linkzerone, Nov 16, 2016.

  1. linkzerone
    OP

    linkzerone Member

    Newcomer
    46
    0
    Oct 24, 2016
    Canada
    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) {
    }
     
  2. linkzerone
    OP

    linkzerone Member

    Newcomer
    46
    0
    Oct 24, 2016
    Canada
    ok i just used margin -60 0 instead of position: relitive and bottom 60 on ##scondaryNav.col-md-2 then gave the footer
    margin-top:60px; padding:35px; padding-bottom:30px;
    background:#222; border-top:0; text-align: center;
    so far its working