axios 예제 중 질문

예제 는 위에 사진처럼 나오는데, 그대로 따라했는데 저는 왜 이렇게(아래 사진) 6개가 한 줄로 나란히 나올까요? 
해결하려면 어떻게 해야할까요? 질문드립니다. 


코드는 아래와 같습니다.

import { Col, Container, Row } from 'react-bootstrap'
import { useNavigate } from 'react-router-dom'
import bg from '../img/bg.png'
import axios from 'axios'
import { useState } from 'react'

const Card = (props) => {
    let navigate = useNavigate()

    return (
    <Col sm>
    <img src={`https://codingapple1.github.io/shop/shoes${props.idx + 1}.jpg`} alt={`shoes${props.idx + 1}`}  onClick={() => navigate(`/Detail/${props.idx}`)} width="80%"/>
    <h4>{props.shoes.title}</h4>
    <p>{props.shoes.price}</p>
    </Col>
    )
  }

const Main = (props) => {
    let [shoes, setShoes] = useState([...props.shoes])
    // console.log(props.shoes)

    return (
      <div>
      <div className='main-bg' style={{ backgroundImage : `url(${bg})` }}></div>
      <Container>
        <Row>
          {
            shoes.map((shoe, i) => {
              return (
                <Card shoes={shoe} idx={i} key={i}/>
              )
            })
          }
        </Row>
      </Container>
      <button onClick={() => {
        axios.get('https://codingapple1.github.io/shop/data2.json')
        .then((data) => {
            setShoes([...shoes, ...data.data])
            console.log(shoes)
        })
        .catch(() => {
            console.log('실패')
        })
      }}>더보기</button>
      </div>
    )
  }

export default Main