带有 logo.img 和导航栏部分的标题

Question

我在为 FreeCodeCamp 产品登陆页面项目创建标头部分时遇到问题。我希望徽标-img 位于网站的左侧，导航栏链接在网站的右侧成行，彼此之间均匀间隔。

我尝试通过创建弹性框等来解决这个问题，但似乎无法得到我想要的。我想知道是否有更多经验的人可以通过解释我的代码做错了什么来帮助我。

:root {
  --light-pink: #f2e3e6;
  --mild-pink: #ed83b5;
  --dark-pink: #ec297b;
  --yellow: #fff486;
}

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

body {
  background-color: var(--mild-pink);
}

header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  position: fixed;
  top: 0;
  background-color: var(--light-pink);
  border-bottom: 5px solid var(--yellow);
  width: 100%;
}

#nav-bar {
  align-items: end;
  justify-content: space-between;
  flex-direction: row-reverse;
  color: var(--dark-pink);
  font-family: "League Spartan", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-optical-sizing: auto;
}

#nav-bar li {
  list-style: none;
}

#nav-bar a {
  display: block;
  padding: 10px 30px;
  cursor: pointer;
  font-size: large;
  transition: text-indent .3s ease-in-out;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@900&display=swap" rel="stylesheet">

<header id="header">
  <img src="./images/rebel01.png" alt="Rebel Streetwear clothing logo" class="logo" id="header-img" loading="lazy" width="200" />
  <nav id="nav-bar">
    <ul>
      <li class="nav-link">
        <a href="#about-us"></a>About us</li>
      <li class="nav-link">
        <a href="#contact-us"></a>Contact us</li>
      <li class="nav-link">
        <a href="#collections"></a>Collections</li>
    </ul>
  </nav>
</header>
<main class="homepage">
  <section class="hero-section"></section>
  <section class="main-content"></section>
  <footer class="footer"></footer>
</main>

Answer 1

见下文。我已经在 CSS 代码中记录了所有内容。

:root {
  --light-pink: #f2e3e6;
  --mild-pink: #ed83b5;
  --dark-pink: #ec297b;
  --yellow: #fff486;
}

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

body {
  background-color: var(--mild-pink);
}

header {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* justify-content: space-around; REMOVED */
  position: fixed;
  top: 0;
  background-color: var(--light-pink);
  border-bottom: 5px solid var(--yellow);
  /* width: 100%; CHANGED */
  width: 100vw;
}

#nav-bar {
  /* align-items: end;
  justify-content: space-between;
  flex-direction: row-reverse; REMOVED */
  color: var(--dark-pink);
  font-family: "League Spartan", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-optical-sizing: auto;
  /* ADDED */
  width: 100%;
}

/* ADDED */
#nav-bar ul {
display: flex;
justify-content: space-around;
}

#nav-bar li {
  list-style: none;
}

#nav-bar a {
  display: block;
  padding: 10px 30px;
  cursor: pointer;
  font-size: large;
  transition: text-indent .3s ease-in-out;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@900&display=swap" rel="stylesheet">

<header id="header">
  <img src="./images/rebel01.png" alt="Rebel Streetwear clothing logo" class="logo" id="header-img" loading="lazy" width="200" />
  <nav id="nav-bar">
    <ul>
      <li class="nav-link">
        <a href="#about-us"></a>About us</li>
      <li class="nav-link">
        <a href="#contact-us"></a>Contact us</li>
      <li class="nav-link">
        <a href="#collections"></a>Collections</li>
    </ul>
  </nav>
</header>
<main class="homepage">
  <section class="hero-section"></section>
  <section class="main-content"></section>
  <footer class="footer"></footer>
</main>