не работает align-items: center в div;

body {
    margin: 0;
    background-color: #ffffff;
    height: 100%;
    
    background: black;
}

.header {
    width: 100vw;
    height: 50px;
    background-color: orange;
    
    line-height: 100%;
}

a {
    text-decoration: none;
}


.header a {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;;
    color: #f5dd5d;
    font-size: 1.4em;
}

.header a:hover {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;;
    color: #737373;
    font-size: 1.4em;;
}


.header-content{
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.left-header-content {
    margin-left: 15%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.left-form input {
    border-radius: 5px;

}

/*.left-form{*/
/*    margin-left: 8%;*/
/*}*/


.right-header-content {
    margin-right: 15%;
    float: right;
}

<header class="header">

    <div class="header-content">

        <div class="left-header-content">

            <div class="my-folder-div">
                <a href="">My Folders</a>
            </div>

            <div class="input-div">
                <form class="left-form">
                    <label >
                        <input  type="text" placeholder="Search">
                    </label>
                </form>
            </div>

        </div>

        <div class="right-header-content">
            <a href="">Dazdraperm</a>
        </div>
    </div>

</header>