已在CSS中添加对应类，为什么logo仍会超出导航栏边框？

问题原因 #

1. .nav容器未设置display: flex，你写的justify-content、align-items等Flex布局专属属性全部无法生效，容器仍为默认的普通块级元素布局
2. .logo设置了float: left，浮动元素会脱离正常文档流，普通块级父元素默认不会将浮动元素的高度计算到自身高度中，因此边框无法包裹住logo
3. 额外语法问题：<li>是列表项标签，必须嵌套在<ul>或<ol>标签内使用，你直接放在<div>里属于HTML语法错误。

解决方案（推荐Flex布局实现，无需浮动） #

修改后CSS代码 #

.nav {
  display: flex; /* 新增该行，激活Flex布局，使后续Flex相关属性生效 */
  color: lightcyan;
  border: 2px solid gray;
  align-items: center;
  top: 0;
  position: sticky;
  justify-content: space-between;
  padding: 15px;
  margin: 10px;
  z-index: 1;
}

.nav .main_nav {
  display: flex;
  list-style: none; /* 新增该行，清除li默认的列表圆点样式 */
  gap: 24px; /* 新增该行，设置导航项之间的间距，可自行调整数值 */
  overflow: hidden;
}

.nav .logo {
  width: 40%;
  display: flex;
  overflow: hidden;
}

修改后HTML代码 #

<nav class="nav">
  <div class="logo">
    <img src="https://i.pinimg.com/originals/4b/e0/d4/4be0d42d105ba2ae4488c0ca6fae5f8a.jpg" alt="Logo" width="100px">
  </div>
  <!-- 把原div改为ul，符合HTML列表语法规范 -->
  <ul class="main_nav">
    <li class="links_a"><a href="#">Services</a></li>
    <li class="links_a"><a href="#">About Us</a></li>
    <li class="links_a"><a href="#">Contact</a></li>
    <li class="links_a"><a href="#">Blogsite</a></li>
  </ul>
</nav>

如果不想改动原有浮动逻辑，也可以在.nav的CSS中添加overflow: auto触发BFC，让父元素计算浮动子元素的高度，即可让边框包裹住logo，不过Flex布局是当前导航栏实现的最优方案，更易维护且适配性更好。

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