イメージとパディングに応答するブートストラップを作成

Question

誰かが私のイメージとその周囲のパディングを助けることができます ？私はpxの代わりに私の詰め物を%にしようとしました、そして私はimg-fluidクラスを私のイメージに加えました。これは、ある程度動作しますが、私は私の窓が広すぎる作れば、私のイメージでは、中心から降りる：

画面ありえないが、同じ幅場合は、画像が正常に動作します：

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% 
} 

誰かが助けることができますか？ここに私のjsfiddleです：

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

おかげで事前に！

Answer 1

余白を追加：0px auto;

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

それは