뭘 잘못 건드렸을까요? 어느 부분 문제로 보이는지 말씀부탁드리겠습... - 인프런

ui.css

/* menu */
.menu {
display: flex;
flex-direction: row;
}

.menu-item {
/* flex-grow: 1; */
width: 25%;
background: gold;
transition: 0.5s;
}

.menu-item:hover {
/* flex-grow: 1.5; */
width: 35%;
background: crimson;
}

.menu-link {
display: block;
padding: 1em;
font-size: 1.2rem;
font-weight: bold;
color: #555;
text-decoration: none;
text-align: center;
}

.menu-link:hover {
color: white;
}


/* search */
.search-form {
display: flex;
height: 40px;
}
.search-form input[type='search'] {
flex: 1;
margin-right: 10px;
border: 0;
border-radius: 0.3em;
font-size: 1rem;
padding: 0 1em;
}

.search-form input[type='submit'] {
width: 4em;
border: 0;
border-radius: 0.3em;
font-size: 1rem;
background: gold;
}

/* bullet list */
/* https://copychar.cc/ */

.info-list-item {
display: flex;
margin:0.5em 0;
}
.info-list-item:before {
content: '';
margin-right: 0.5em;
}

/* message */
.user-item {
display: flex;
margin-bottom: 1.5em;
}

.user-photo {
flex-shrink: 0;
width: 50px;
height: 50px;
margin: 0.5em;
border: 2px solid #333;
border-radius: 50%;
background-color: gold;
background-repeat: no-repeat;
background-position: center;
background-size: 150%;
}

/* friend list */
.friend-item {
align-items: center;
}
.user-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

/* modal */
.modal {
display: flex;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
justify-content: center;
align-items: center;
}
.dialog {
width: 50vw;
padding: 2em;
border-radius: 1em;
background: white;
}

/* card list */
.card-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, auto));
column-gap: 2%;
}
.card-item {
display: flex;
flex-direction: column;
margin-bottom: 2rem;
}
.card-image {
height: 0;
padding-bottom: 60%;
background: lightgray;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.card-image img {
display: none;
}
.card-desc{
flex: 1 1 auto;
padding: 1em;
background: white;
}

ui-page.css

.header {
display: flex;
justify-content: space-between;
height: 80px;
align-items: center;
padding:0 1rem;
}
/* .header에 justify-content: space-between; 대신 사용 가능 */
/* .search-form {
 margin-left: auto;
} */

.website-title {
flex-shrink: 0;
margin-right: 10px;
color: #555;
}
.search-form {
width: 240px;
max-width: 60%;
margin-left: auto;
margin-right: 3rem;
}

.primary {
padding:1rem;
}

@media (max-width: 600px) {
.menu {
flex-direction: column;
}
.menu-item {
width: 100%;
transition: none;
}
.menu-item:hover {
transition: 0.5s;
width: 100%;
}
}

.secondary {
padding: 1rem;
}

.secondary-a {
background:white;
}

.secondary-b {
color: white;
background:#666;
}

.footer {
padding: 1rem;
border-top: 1px solid lightgray;
text-align: center;
}

.mb2rem {
margin-bottom: 2rem;
}

.modal-switch {
font-size: 2rem;
}

.modal {
display: none;
top: 80px;
}

#modal-switch:checked ~ .modal {
display: flex;
}

label[for="modal-switch"] {
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
top: 1.3rem;
right: 1rem;
width: 40px;
height: 40px;
/* background: red; */
}

label[for="modal-switch"]::before {
content: "⚑";
font-size: 2rem;
}

#modal-switch:checked ~ label[for="modal-switch"]::before {
color:blue;
}

#modal-switch,
label[for="modal-switch"] span {
overflow: hidden;
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
top: 0;
}

@media (min-width: 1024px) {
.page {
display: grid;
grid-template-columns: 20% 1fr 20%;
grid-template-areas:
'header header header'
'menu menu menu'
'secondary-a primary secondary-b'
'footer footer footer'
;
}
.header {
grid-area: header;
}
.menu {
grid-area: menu;
}
.primary {
grid-area: primary;
}

.secondary-a {
grid-area: secondary-a;
}
.secondary-b {
grid-area: secondary-b;
}
.footer {
grid-area: footer;
}
}

@media (min-width:1400px) {
.page {
display: grid;
grid-template-columns: 300px 1fr 300px;
}
}

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

뭘 잘못 건드렸을까요? 어느 부분 문제로 보이는지 말씀부탁드리겠습니다ㅠ