이미지 및 패딩에 반응하는 부트 스트랩 만들기

Question

누군가 내 이미지와 그 주위의 패딩을 도울 수 있습니까? 반응 형입니까? 나는 내 패딩을 대신에 %으로 만들려고 시도했고 내 이미지에 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; 
} 

이