리액트 헤더컴포넌트와 컨텐츠 컴포넌트 겹치는 문제

- 문제 된 Header 컴포넌트 스타일링

.header_container{
    width: 90%;
    max-width: 90%;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(165, 28, 28, 0.952);
    position: fixed;
    top: 0;
}

- index.css

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
}

해결링크

- 변경 후 코드

import React from "react";
import classes from "./ContentCard.module.css";

function ContentCard(props) {
  return <div className={classes.content_card}>{props.children}</div>;
}

export default ContentCard;

.content_card{
    padding: 40px;
}

Outlet을 Card 컴포넌트로 감싸주고 그 안에서 padding 을 주니 해결되었다.