nav 태그 안에 넣어서 일렬로 만들고 싶은데 어떻게 해야할까요??

JavaScript
1

html 코드입니다

<html class = "">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="discription" content="KGJ WEB PROJECT-1">
    <link rel="stylesheet" href="header.css">
</head>

<body data-device="pc">
    <header class ="header_layout_1" data-module-header="{isSignIn:false,firstname:,phoneNumeber:,emailAddresss:null}">
        <article class="contents">
            <nav class="header-lnb">
                <span class="header-logo" data-click-logo href="">
                        <img class= "header-logo" src="header-logo/KGJ LOGO1.png" width="200">
                </span>      

                <ul class="header-menu-ondepth" data-module-gnb="{type:type1">
                    <li class="onedepth-list" ><a href="">GALLEY</a></li>
                    <li class="onedepth-list"><a href="">Web</a></li>
                    <li class="onedepth-list"><a href="">ABOUT</a></li>
                    <li class="onedepth-list"><a href="">STORY</a></li>
                </ul>          
            </nav>
        </article>

    </header>
</body>
</html>

css 코드입니다

nav.header-lnb{
width: 100%;
height: 70px;
padding: 0px 32px 0px 32px;
position: fixed;
text-align: center;
margin: 0 auto;
top: 0;
left: 0;
right: 0;
}

header.header_layout_1{
background-color: white;
display: inline-block;
}

span.header-logo{
display: flex;
text-align: left;
width: 194px;
height: inherit;
}

ul.header-menu-ondepth{
display: inline-block;
list-style: none;
vertical-align: center;
width: calc(100% - 418px);
padding: 0;
border: 0;
}

.header-menu-ondepth>li>a{
font-size: 20px;
text-decoration: none;
color: #111111;

}
li.onedepth-list{
display: inline-block;
padding: 0px 20px;

}

2

span.header-logo에 display:flex를 제거해야할 것 같습니다.