.container {
    width: 100%;
    /* 반응형 */
    padding: 0 15px;
    /* container에 반드시 gutter를 적용 시켜줘야한다. */
    max-width: 720px;
    /* 디자인에 따라, */
    margin: 0 auto;
    /* 가운데를 기준 */
    background-color: hotpink;
}

.row {
    display: flex;
    flex-wrap: wrap;
    /* col을 담는 row의 칸을 유지해야하기 때문에 */
    margin-right: -15px;
    /* gutter를 넣어주기 위해. - gutter의 픽셀  */
    margin-left: -15px;
    /* - gutter의 픽셀  */
}

.col-1 {
    width: 8.3333333333%;
    padding: 0 15px;
    /* margin을 주면 100%를 넘어가니 paddding으로 */
}

.col-2 {
    width: 16.6666666667%;
    padding: 0 15px;
}

.col-3 {
    width: 25%;
    padding: 0 15px;
}

.col-4 {
    width: 33.3333333333%;
    padding: 0 15px;
}

.col-5 {
    width: 41.6666666667%;
    padding: 0 15px;
}

.col-6 {
    width: 50%;
    padding: 0 15px;
}

.col-7 {
    width: 58.3333333333%;
    padding: 0 15px;
}

.col-8 {
    width: 66.6666666667%;
    padding: 0 15px;
}

.col-9 {
    width: 75%;
    padding: 0 15px;
}

.col-10 {
    width: 83.3333333333%;
    padding: 0 15px;
}

.col-11 {
    width: 91.6666666667%;
    padding: 0 15px;
}

.col-12 {
    width: 100%;
    padding: 0 15px;
}