Faire l'image et le padding réactif bootstrap

Question

Quelqu'un peut-il m'aider à faire mon image et le rembourrage autour responsive? J'ai essayé de faire mon rembourrage % au lieu de px et j'ai ajouté la classe img-fluid à mon image. Il travaille dans une certaine mesure, mais si je fais ma fenêtre trop large, mon image se décentrer:

Si l'écran ne est pas aussi large, l'image fonctionne très bien:

HTML:

<div class="Aligner"> 
     <div class="Aligner-item"> 

    <div> 
     <div class="card authenticationRequest" style=""> 
     <div class="card-header-img"> 
      <img class="card-img-top mainImage img-fluid" src="https://i.pinimg.com/736x/bc/be/e6/bcbee6931f71db0d1629355bd61fe8cd--wolves-mans.jpg" alt="Smiley face" height="42" width="42"> 
     </div> 
     <div class="card-block"> 
      <p>Hi</p> 
      <p>Hello</p> 
      <p>Its</p> 
      <p>Me</p> 
     </div> 
     </div> 
    </div> 
    </div> 
    </div> 

CSS:

@import url('http://getbootstrap.com/dist/css/bootstrap.css'); 

.Aligner { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-top: 2%; 
} 

.Aligner-item { 
    width: 50%; 
} 

.mainImage { 
    height: 400px; 
    width: 300px; 
} 

.card-header-img { 
    background-color: #cf0000; 
    /* padding: 40px 20px 40px 20px; */ 
    padding: 10% 10% 10% 10% 
} 

Quelqu'un peut-il aider? Voici mon jsFiddle:

https://jsfiddle.net/DTcHh/38370/

Merci d'avance !!!

Answer 1

ajouter une marge: 0px auto;

.card-header-img { 
    background-color: #cf0000; 
    padding: 10% 10% 10% 10%; 
    margin: 0px auto; 
} 

il fonctionne