CSS %로 반응형 만들기

화면 창을 줄이면 Youtube 로고가 덮여서 가려지는 문제가 발생했다.

- 잘못된 코드

.searchForm_container{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.searchForm_container form{
    display: flex;
    align-items: center;
    justify-content: center;
}

.searchForm_container input{
    width: 400px;
    padding: 10px;
    color: #fff;
    background-color: black;
    border: none;
    height: 50px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    font-size: 18px;
    margin-bottom: 1px;
}

- 해결한 코드

.header_form{
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
}


.header_form input{
    width: 80%;
}

상위의 div속성 자체를 제거하고 form 태그자체의 width를 100%, input의 넓이를 80%을 줘서 넓혀주었다.

위와 같은 문제점이 발생하지 않는다.