css responsive dentro media query non viene applicato

[simonevetere]

css
#grad1 {
    margin-left: 25%;
    height: 216px;
    width: 599px;
    background-image: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,1)); 
    border-radius:10px;
}
#grad1:hover {
    margin-left: 25%;
    height: 216px;
    width: 599px;
    background-image: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.5)); 
    border-radius:10px;
}
@media (max-width: 767px){
#grad1 {
    margin-left: 0px;
    
}

html 
<div id=#grad1>
</div>

non cambia nulla rimpicciolendo la pagina
mentre in questo caso non casica proprio in css:

css
.grad1 {
    margin-left: 25%;
    height: 216px;
    width: 599px;
    background-image: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,1)); 
    border-radius:10px;
}
.grad1:hover {
    margin-left: 25%;
    height: 216px;
    width: 599px;
    background-image: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.5)); 
    border-radius:10px;
}
@media (max-width: 767px){
.grad1 {
    margin-left: 0px;
    
}

html 
<div class="grad1">
</div>

se c'e' qualcuno disposto condivido su drive il codice completo