카드 컴포넌트 만들기 중에서 질문입니다

function app 내부에는
 
       <div className="container">
        <div className="row"  >
          {shoes.map(function(a){return(
          <Shoescontent ti={a.title} co={a.content} ig={a.img}></Shoescontent>
          )
          })}
        </div>
      </div>

으로 map활용해서 반복문 만들고

컴포넌트는 

function Shoescontent (prop){
  return(
    <div>
      <div className="col-md-4">
      < img src= {prop.ig} width="80%" />
      <h4>{prop.ti}</h4>
      <p>{prop.co}</p>
      </div>
    </div>
  )
}
으로 만들어서 작동은 되는 것 확인 했습니다. 
(이미지는 data.js에 직접 주소 넣은 다음 빼는 식으로 했습니다)

그런데 이렇게 하니까 가로정렬이 되지 않고 카드 3개가 세로로 나열되어 있었습니다
컴포넌트 가로 정렬로 구글링해서  style={{display: 'flex'}} 이나  style={{display: 'float'}}를 넣어 봤는데도 바뀌지 않아서 

왜 그런지, 그리고 가로정렬로 다시 맞추려면 어떻게 해야하는지 알고 싶습니다