React 실전프로젝트 질문

왜 강의와 다르게 이렇게 표시되는게 맞는지 굼금해서 올려봅니다.

아니라면 왜 이런지 알려주시면 감사하겠습니다.

밑에는 App.css입니다.

@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&family=Yeon+Sung&display=swap');

body {
    background-color: #f6f6f6;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Nanum Pen Script';
    min-height: 100vh;
    margin: 0px;
}

@media (min-width: 650px) {
    .App {
        width: 640px;
    }
}

@media (max-width: 650px) {
    .APP {
        width: 90vw;
    }
}

#root {
    background-color: white;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.App {
    min-width: 100vh;
    padding-left: 20px;
    padding-left: 20px;
}

/* my button */

.MyButton {
    cursor: pointer;
    border: none;
    border-radius: 5px;

    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;

    font-size: 18px;

    white-space: nowrap;
    font-family: 'Nanum Pen Script';
}

.MyButton_default {
    background-color: #ececec;
    color: black;
}

.MyButton_positive {
    background-color: #64c964;
    color: white;
}

.MyButton_negative {
    background-color: #fd565f;
    color: white;
}

/* header */

header {
    padding-top: 20px;
    padding-bottom: 20px;

    display: flex;
    align-items: center;
    border-bottom: 1px solid #e2e2e2;
}

header > div {
    display: flex;
}

header .head_text {
    width: 50%;
    font-size: 25px;
    justify-content: center;
}

header .head_btn_left {
    width: 25%;
    justify-content: start;
}

header .head_btn_right {
    width: 25%;
    border-left: 25px;
    justify-content: end;
}

header button {
    font-family: 'Nanum Pen Script';
}

/* DiaryList */

.DiaryList .menu_wrapper {
    margin-top: 20px;
    margin-bottom: 30px;

    display: flex;
    justify-content: space-between;
}

.DiaryList .menu_wrapper .right_col {
    flex-grow: 1;
}

.DiaryList .menu_wrapper .right_col button {
    width: 100%;
}

.DiaryList .ControlMenu {
    margin-right: 10px;
    border: none;
    border-radius: 5px;
    background-color: #ececec;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;

    cursor: pointer;
    font-family: 'Nanum Pen Script';
    font-size: 18px;
}

/* DiaryItem */

.DiaryItem {
    padding-top: 15px;
    padding-bottom: 15px;

    border-bottom: 1px solid #e2e2e2;

    display: flex;
    justify-content: space-between;
}

.DiaryItem .emotion_img_wrapper {
    cursor: pointer;
    min-width: 120px;
    height: 80px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
}

.DiaryItem .emotion_img_wrapper_1 {
    background-color: #64c964;
}

.DiaryItem .emotion_img_wrapper_2 {
    background-color: #9dd772;
}

.DiaryItem .emotion_img_wrapper_3 {
    background-color: #fdce17;
}

.DiaryItem .emotion_img_wrapper_4 {
    background-color: #fd8446;
}

.DiaryItem .emotion_img_wrapper_5 {
    background-color: #fd565f;
}

.DiaryItem .emotion_img_wrapper img {
    width: 50%;
}

.DiaryItem .info_wrapper {
    flex-grow: 1;
    margin-left: 20px;
    cursor: pointer;
}

.DiaryItem .diary_date {
    font-weight: bold;
    font-size: 25px;
    margin-bottom: 5px;
}

.DiaryItem .diary_centent_preview {
    font-size: 18px;
}

.DiaryItem .btn_wrapper {
    min-width: 70px;
}

/* DirayEditor */

.DirayEditor textarea {
    font-family: 'Nanum Pen Script';
    font-size: 20px;

    box-sizing: border-box;
    width: 100%;
    min-height: 200px;
    resize: vertical;

    border: none;
    border-radius: 5px;
    background-color: #ececec;

    padding: 20px;
}

.DirayEditor .control_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.DirayEditor section {
    margin-bottom: 40px;
}

.DirayEditor h4 {
    font-size: 22px;
    font-weight: bold;
}

.DirayEditor .input_date {
    border: none;
    border-radius: 5px;
    background-color: #ececec;

    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;

    cursor: pointer;
    font-family: 'Nanum Pen Script';
    font-size: 20px;
}

.DirayEditor .emotion_list_wrapper {
    display: grid;
    grid-template-columns: repeat(5, auto);
    gap: 2%;
}
/* EmotionItem */

.EmotionItem {
    cursor: pointer;

    border-radius: 5px;
    padding-top: 20px;
    padding-bottom: 20px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.EmotionItem img {
    width: 50%;
    margin-bottom: 10px;
}

.EmotionItem span {
    font-size: 18px;
}

.EmotionItem_off {
    background-color: #ececec;
}

.EmotionItem_on_1 {
    background-color: #64c964;
    color: white;
}

.EmotionItem_on_2 {
    background-color: #9dd772;
    color: white;
}

.EmotionItem_on_3 {
    background-color: #fdce17;
    color: white;
}

.EmotionItem_on_4 {
    background-color: #fd8446;
    color: white;
}

.EmotionItem_on_5 {
    background-color: #fd565f;
    color: white;
}