导航栏布局异常求助：Logo居左、菜单居右无法实现

你的HTML存在结构错误，同时CSS的flex布局没有应用到正确的容器上，导致布局无法按预期生效。以下是修复方案：

1. 修正HTML结构 #

你的header标签内有多余的</span>和</div>闭合标签，这会破坏DOM结构，先清理掉：

<body>
  <header>
    <div class="logo">
      <a href="index.html"><img src="meb_logo.png" alt="Logo"></a>
    </div>
    <nav class="nav">
      <ul class="menu-nav">
        <li class="menu-nav_item active">
          <a href="index.html" class="menu-nav_link">
            Home
          </a>
        </li>
        <li class="menu-nav_item">
          <a href="about.html" class="menu-nav_link">
            Duyurlar
          </a>
        </li>
        <li class="menu-nav_item">
          <a href="projects.html" class="menu-nav_link">
            Projeler
          </a>
        </li>
        <li class="menu-nav_item">
          <a href="contacts.html" class="menu-nav_link">
            Iletisim
          </a>
        </li>
      </ul>
    </nav>
  </header>
</body>

2. 调整CSS实现预期布局 #

给header添加flex布局，让内部元素实现左右分布，同时确保垂直居中：

:root {
  --background: #D9E4EF;
  --header: #62ABF5;
  --header2: #1062B3;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Arimo", sans-serif;
}

body {
  background-color: var(--background);
  height: 100vh;
}

header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  padding: 20px 10%;
  z-index: 100;
  background: var(--header);
  /* 添加以下flex布局属性 */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-nav {
  color: var(--background);
  display: flex;
  /* 移除justify-content: end，由header控制整体布局 */
  align-items: center;
  text-decoration: none;
  list-style: none; /* 移除默认列表样式 */
}

.menu-nav_item {
  text-decoration: none;
  margin-left: 35px;
}

a {
  text-decoration: none;
  color: var(--background); /* 确保链接继承文字颜色 */
}

li:hover {
  color: var(--header2);
}

.logo {
  width: 70px;
  margin: 0;
}

关键说明： #

• header上的display: flex开启flex布局，justify-content: space-between会将logo和导航栏分别推到容器的左右两端
• align-items: center确保所有元素在垂直方向上居中，解决元素跑到header底部的问题
• 给.menu-nav添加list-style: none移除默认的列表圆点，让导航更美观
• 给a标签设置color: var(--background)，确保链接文字颜色和导航项一致

内容的提问来源于stack exchange，提问作者user27683077