Div pomimo nadania wartości hidden nie ukrywa dokońca diva

Mam taki problem testuje się RWD i chcę u chcę ukryć diva, ale w momencie kiedy go ukryje ukrywany jest tylko obrazek, który jest w tym divie natomiast pozostaje wolne miejsce i tak mam przygotowane dla rozmiaru okna większego niż 640 px.

plik html

<div class=content>
<img src=as.jpg width=300 class=f></img>xvfnkdfjnfvdkjs sdjfbsdjf sdkf jsd f
</div>

plik css

body {
    
    
 background-color: gray;   
    
    
    margin: 0px;
    
    
    
}
.navbar0 {
    
 min-height: 100%;   
    
    
    
    
    
    
    
    
}

@media (min-width: 640px) {
    
 body {
     
  background-color: red;   
 }
    .content  {
        visibility:hidden;
     width: 100px;
    }

}

Ło panie...

1. Wartości atrybutów w htmlu dawaj w cudzysłowie

<p style="margin:0" class="abc abc">...</p>

1. Tag img zamyka się sam - wystarczy ze zrobisz <img src="..." alt="..." title="..." />

2. Skoro dajesz width obrazkowi - to po co nadajesz klasę f ? nie możesz tej szerokości w klasie ustawić?

3. Czy wartości domyślne dla taga img są wyzerowane? marginy/paddingi (czyli popularny reset.css) albo coś w stylu normalize.css ?

4. To jest css czy scss? (mi to wygląda na scss)

To co wyżej + główna przyczyna problemu:

visibility:hidden will keep the element in the page and occupies that space but does not show to the user. display:none will not be available in the page and does not occupy any space. visibility:hidden hides an element, but it will still take up the same space as before

https://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone

jak krew w piach...
ja na twoim miejscu przeszedłbym na wordpressa, serio, zadajesz te same pytania od 2015 roku dude :)

display:none, na przykład.