Centrer le contenu de ma home quand la fenêtre est réduite.

Bonjour,

J'aimerais que le contenu de ma home reste centrée quand la page est réduite ou visible depuis une tablette ou un smartphone. Lors d'une réduction de la fenêtre certaines des cases descendent vers le bas tout en laissant les autres cases sur la gauche.

Pouvez vous m'aider ? Je ne suis pas experte en positionnement.

Merci beaucoup !

Le site en question est celui ci : aureliemennessier .com

     


        <div id="portfolio">
        
           <div class="work">
                <a  href="pages/diplome.html">
                <img width="550px" alt="" src="images/diplome/diplome00.png">
                </a>
           </div>
                
           <div class="work">
                <a href="pages/adynaton.html">
                <img width="550px" src="images/adynaton/adynaton00.png">
                </a>
           </div>
        
            <div class="work">
                <a href="pages/musee.html">
                <img width="550px" src="images/musee/musee00.png">
               </a>
           </div>
          
           <div class="work">
                <a href="pages/metamorphose.html">
                <img width="550px" src="images/metamorphose/metamorphose00.png">
                </a>
           </div>
           
           <div class="work">
                <a href="pages/bene.html">
                <img width="550px" src="images/bene/bene00.png">
                </a>
           </div>
          
           <div class="work">
                <a href="pages/blobterre.html">
                <img width="550px" src="images/blobterre/blobterre00.png">
                </a>
          </div>
                
           <div class="work">
                <a href="pages/lv.html">
                <img width="550px" src="images/lv/LV00.png">
                 </a>
          </div>
                
          <div class="work">
                <a  href="pages/broderie.html">
                <img width="550px" src="images/broderie/broderie00.png">
                </a>
          </div>
             
          <div class="work">
                <a href="pages/atrabile.html">
                <img width="550px" src="images/atrabile/atrabile00.png">
                </a>
          </div>
              
          <div class="work">
                <a href="pages/diorprestige.html">
                <img width="550px" src="images/diorprestige/diorprestige00.png">
                </a>
          </div>
                
          <div class="work">
                <a href="pages/broderie2.html">
                <img width="550px" src="images/broderie2/broderie200.png">
                </a>
          </div>
                
          <div class="work">
                <a href="pages/greeninvaders.html">
                <img width="550px" src="images/greeninvaders/greeninvaders00.png">
                </a>
          </div>
                
          <div class="work">
                <a href="pages/animatou.html">
                <img width="550px" src="images/animatou/animatou00.png">
                </a>
          </div>
                
          <div class="work">
                <a href="pages/paleo.html">
                <img width="550px" src="images/paleo/paleo00.png">
                </a>
          </div>
                
          <div class="work">
                <a href="pages/maisonullens.html">
                <img width="550px" src="images/maisonullens/maisonullens00.png">
                </a>
          </div>
                
          <div class="work">
                <a href="pages/dessins2.html">
                <img width="550px" src="images/dessins2/nuage00.png">
                </a>
          </div>
                
          <div class="work">
                <a href="pages/dessins.html">
                <img width="550px" src="images/dessins/mountain00.png">
                </a>
          </div>
                
          <div class="work">
                <a href="pages/sister.html">
                <img width="550px" src="images/sister/sister00.gif">
                </a>
          </div>
                
          <div class="work">
                <a href="pages/muf.html">
                <img width="550px" src="images/muf/muf00.png">
                </a>
          </div>
                
                
       </div>

#portfolio {
    margin: 150px 50px;
}

.work {
    display: inline-block;
    margin: 20px;
    max-width:550px;
    vertical-align: top;
    position:relative; 
    z-index:1;
}