안녕하세요 똑같이 한거 같은데 확인 해보니 달라서 ... - Inflearn

Css 부분
* {
    margin: 0;
    padding: 0;
}
#header {
    height: 64px;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid black;
}
#body {
    height: 100%;
    width: 1024px;
    margin: 0 auto; /*부모로 부터 중앙 정렬*/
    padding-bottom: 24px;
}
#footer {
    height: 200px;
    background-color: red;
}
#banner {
    height: 300px;
    background-color: yellow;
}

#header-area {
    width: 1024px;
    height: 100%;
    /* margin: 0 auto; */
    display: flex;
    align-items: center;
}
#header-area > img {
    width: 128px;
    height: 36px;
}
#banner > img {
    width: 100%;
    height: 300px;
}
#body > h1 {
    margin-top: 16px;
}
#product-list{
    display: flex;
    flex-wrap: wrap;
    margin-top: 12px;
}
.product-card {
    width: 180px;
    height: 300px;
    background-color: gray;
    margin-right: 12px;
    margin-bottom: 12px;
}
Html 부분
<h1>판매되는 상품들</h1>
        <div id="product-list">
            <div class="product-card"></div>
            <div class="product-card"></div>
            <div class="product-card"></div>
            <div class="product-card"></div>
            <div class="product-card"></div>
            <div class="product-card"></div>
        </div>
    </div>
    <div id="footer"></div>
확인을 해 보니 밑의 결과 처럼 나오는데 원래 이런건지 맥북이 아니라서 이러는건지 도통 모르겠어서..

Inflearn Community Q&A

안녕하세요 똑같이 한거 같은데 확인 해보니 달라서 질문 글 올립니다 ㅜㅜ