Cộng đồng Hỏi & Đáp của Inflearn

 안녕하세요.
선생님의 강의를 보고 유튜브 실습을 진행했는데 search bar의 위치가 중앙이 아닌 오른쪽 다른 아이콘에 붙어있습니다.
코드를 확인했을때 이상하다고 생각하는 부분이 없었습니다...
그리고 sidebar의 글자 크기는 영상과 달라도 괜찮나요?

.header{
    height: 55px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;

    background-color: #212121ff;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #4d4d4d;

}
.left-section{
    display: flex;
    align-items: center;
}
.hamburger-menu{
    height: 24px;
    margin-left: 24px;
    margin-right: 24px;

}
.youtube-logo{
    height: 70px;
}
.middle-section{
    flex: 1;
    margin-left: 70px;
    margin-right: 35px;
    max-width: 500px;
    display: flex;
    align-items: center;
    flex-grow: 1;
}
.search-bar{
    flex: 1;
    height: 36px;
    padding-left: 10px;
    font-size: 16px;
    border: 1px solid #4d4d4d;
    border-radius: 2px;
    background-color: #121212;
    width: 0;
}
.search-bar::placeholder{
    font-size: 16px;
}
.search-button{
    height: 40px;
    width: 66px;
    background-color: #323232;
    border: 1px solid #4d4d4d;
    margin-left: -1px;
    margin-right: 10px;
}
.search-icon{
    height: 25px;
}
.voice-search-button{
    height: 40px;
    width: 40px;
    border-radius: 20px;
    border: none;
    background-color: #121212;
}
.voice-search-icon{
    height: 24px;
}
.search-button,
.voice-search-button,
.upload-icon-container{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.search-button .tooltip,
.voice-search-button .tooltip,
.upload-icon-container .tooltip{
    position: absolute;
    background-color: white;
    bottom: -30px;
    padding: 4px 8px 4px 8px;
    border-radius: 2px;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.15s;
    white-space: nowrap;
}
.search-button:hover .tooltip,
.voice-search-button:hover .tooltip,
.upload-icon-container:hover .tooltip{
    opacity: 1;
}
.upload-icon{
    height: 24px;
}
.youtube-apps-icon{
    height: 24px;
}
.notifications-icon{
    height: 24px;
}
.current-user-picture{
    height: 32px;
    border-radius: 16px;
}
.right-section{
    width: 180px;
    margin-right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.notifications-icon-container{
    position: relative;
}
.notifications-count{
    position: absolute;
    top: -2px;
    right: -5px;
    background-color: rgb(200, 0, 0);
    color: white;
    font-size: 11px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius: 10px;
}

<header class="header">
        <div class="left-section">
            <img class="hamburger-menu" src="assets/icons/hamburger-menu.svg" >
            <img class="youtube-logo" src="assets/icons/youtube-logo.svg">
        </div>
        <div class="middle-section">
            <input class="search-bar" type="text" placeholder="Search" >
            <button class="search-button">
                <img class="search-icon" src="assets/icons/search.svg" >
                <div class="tooltip">Search</div>
            </button>
            <button class="voice-search-button">
                <img class="voice-search-icon" src="assets/icons/voice-search-icon.svg" >
                <div class="tooltip">Search with your voice</div>
            </button>
            <div class="right-section">
                <div class="upload-icon-container">
                    <img class="upload-icon" src="assets/icons/upload.svg" >
                    <div class="tooltip">Create</div>
                </div>
                <img class="youtube-apps-icon" src="assets/icons/youtube-apps.svg" >
                <div class="notifications-icon-container">
                    <img class="notifications-icon" src="assets/icons/notifications.svg">
                    <div class="notifications-count">1</div>
                </div>
                <img class="current-user-picture" src="assets/images/avatars/avatar-1.png" >
            </div>
        </div>
    </header>