[CSS] - header 잡는 법

<header>
        <div class="header-wrapper">
            <img src="images/laneige-logo.svg">
            <ul>
                <li>브랜드</li>
                <li>LBLL</li>
                <li>미츠 아트</li>
                <li>베스트 & 신상품</li>
                <li>스킨케어</li>
                <li>메이크업</li>
                <li>옴므</li>
                <li>비스포크</li>
                <li>이벤트</li>
            </ul>
            <div class="icons">
                <i class="xi-user-o"></i>
                <i class="xi-maker"></i>
                <i class="xi-search"></i>
                <i class="xi-bars"></i>
            </div>
        </div>
    </header>

• 처음에 header-wrapper이라는 div 없이 짰는데 그러면 header에 padding 오른쪽이 안맞는 현상이 일어남

header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
}

.header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    padding: 0 16px;
}

• header 잡는법 header에 있는 요소를 가운데 정렬(align-items), 각각 양끝 사이드 정렬(justify-content)로 정렬하는 방법이다.
• header 밑에 div 를 하나 추가해서 그 div에 display:flex 해야함.