flex로 가운데 정렬을 하고 싶은데 어디를 수정해야 하나요?

html
<html>
  <head>
    <title>market</title>
    <link href="index.css" type="text/css" rel="stylesheet" />
    <script></script>
  </head>
  <body>
    <div id="header"></div>

    <div id="parent">

      <div id="body">
        <div id="banner">배너이미지</div>
        <h1>판매되는 상품들</h1>
        <div id="productlist"></div>
      </div>
     
    </div>

    <div id="footer"></div>
  </body>
</html>

css

#header {
  height: 64px;
  background-color: black;
}
#parant {
  display: flex;
  flex-direction: row;
}

#body {
  justify-content: center;
  width: 1024;
  height: 100%;
  background-color: blue;
}

#footer {
  height: 200px;
  background-color: red;
}
#banner {
  height: 300px;
  background-color: yellow;
}
부모를 만들고 body를 자식으로 넣고
부모에 display:flex를 적용
자식인 body에 justifiy-content:center를 적용했는데
생각처럼 작동을 안해요... 어디서 수정을 해야 할까요?
 
 
 

인프런 커뮤니티 질문&답변