Remove unnecessary white space in html

I want to remove the unnecessary white space in my html it is inside in the media queries and I'm wondering how it appeared when my other media queries doesn't have it. Can someone give me a clue on how to get rid of this using best practice?

Here's the picture :

here's the code:

@media screen and (min-width: 768px) and (max-width: 991px){
          .logo {
    width: 220px;
}
.gear {
    position: absolute;
    left:23%;
    top:9px;
    width: 10px;
}
.lightning {
    position: absolute;
    top:30px;
    left:32%;
}
@-webkit-keyframes scale {
    0%{  -webkit-transform: scale(0,0);}
    100%{ -webkit-transform: scale(0.5,0.5 );}
}
@-moz-keyframes scale {
    0%{-ms-transform:scale(0,0);}
    100%{-ms-transform: scale(0.5,0.5);}
}

@-o-keyframes scale {
    0%{-o-transform:scale(0,0);}
    100%{-o-transform: scale(0.5,0.5);}
}

@-ms-keyframes scale {
    0%{-ms-transform:scale(0,0);}
    100%{-ms-transform: scale(0.5,0.5);}
}

@keyframes scale {
    0%{transform:scale(0,0);}
    100%{transform: scale(0.5,0.5);}
}
.con {
  margin-right: 0px;
}
.navbar-inverse .navbar-nav>li>a {
    color:  #949494;
    padding-top: 47px;
    padding-right: 0px;
    font-weight: bold;
    border-bottom: 3px solid transparent;
    transition: border-bottom-color 0.5s ease-in-out;
    -webkit-transition: border-bottom-color 0.5s ease-in-out;
    font-size: 10px;
}
}