[Résolu] Mise en page Viewport

Bonjour,

Alors je commence tout juste a coder, j'ai suivi quelques cours internet sur le HTML et CSS, et j'essai d'y ajouter du Bootstrap.

Donc je vous met le liens vers le site que j'essaie de faire, ce n'est que le debut du site.

Ici

Donc mon problème est que une bonne partie de ma mise en page disparaît quand la largeur de page est inférieur a 768px.

Je vous joint une partie de mon code.

Toute ma partie @media du CSS:

/* MediaQ */

@media (max-width: 768px){
    #photomd{
         display: none;
        }
    #photolg{
        display: none;
        }
}

@media (min-width: 1200px){
    #photosm{
        display: none;
    }
    #photomd{
        display: none;
    }  
}

@media (min-width: 992px) and (max-width: 1200px){
    #photosm{
        display: none;
    }
    #photolg{
        display: none;
    }
    
}

@media (min-width: 768px){
    .nav-item{
        width: 110px;
}

@media (min-width: 768px) and (max-width: 992px){
    #photomd{
        display: none;
    }    
    #photolg{
        display: none;
    }
}
    
@media (max-width: 768px){
    #photomd{
         display: none;
        }
    #photolg{
        display: none;
        }
}

La partie HTML des choses sur lesquels je veut agir avec le @media

<section id="photo">
            <div class="container">
                <img id="photosm"class=img-responsive src="images/photosm.jpg" style=width:100% alt="Photo bienvenue"/>
                <img id="photomd" src="images/photomd.jpg" alt="Photo bienvenue">
                <img id="photolg" src="images/photolg.jpg" alt="Photo bienvenue">
            </div>    
        </section>

Alors je n'arrive vraiment pas a comprendre pourquoi les background-color, les borders, etc ... disparaissent quand je passe <768px ...

Quelqu'un aurait une idée ?

Si il vous fait d'autre partie du code n’hésitez pas.