标题与徽标和导航栏项目位于一行

Question

我目前正在学习 Code Academy - 前端开发人员课程，旁边，我正在尝试创建我的网站..我真的很努力，因为这是我第一次做这样的事情。我已经感到失落和愚蠢了。 我已经被我的标题卡住了！ 我有我的标题，我想放置我的徽标（在左侧），在它旁边，我希望我的导航栏出现（不是在它旁边，我希望导航栏在标题的中心）页）

我怎样才能做到这一点？另外，如果您能解释为什么应该按照应有的方式完成，我会很高兴，这样我不只是复制粘贴代码，而是实际上学到了一些东西。感谢数百万人的帮助！

<!--THIS IS MY HEADER-->
        <div>
            <header class="header">
                <img class="logo" src="./Pictures/Screenshot 2023-12-22 at 19.40.06.png" alt="My Image">
                <nav class="navbar">
                    <ul>
                        <li>ABOUT ME</li>
                        <li>MY WORK</li>
                        <li>CONTACT</li>
                    </ul>
                </nav>
            </header>
            
        </div>

CSS

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

.header {
    background-color: white;
    border-bottom: solid;
  }

.logo {
    width: 188px;
    height: 90px;
}
.navbar{
    list-style-type: none;
    display: flex;
    width: 100%;
    justify-content: space-evenly;
}
 

Answer 1

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

.header {
    background-color: white;
    border-bottom: solid;
  }

.logo {
    width: 188px;
    height: 90px;
}
.navbar {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
}
 
.navbar  ul li{
    list-style-type: none;
    display:inline;
}

<!--THIS IS MY HEADER-->
        <div>
            <header class="header">
                <img class="logo" src="./Pictures/Screenshot 2023-12-22 at 19.40.06.png" alt="My Image">
                <nav class="navbar">
                    <ul>
                        <li>ABOUT ME</li>
                        <li>MY WORK</li>
                        <li>CONTACT</li>
                    </ul>
                </nav>
            </header>
            
        </div>