移动端或缩小浏览器窗口时Logo被截断的CSS Flexbox问题

问题核心原因 #

1. 未全局声明box-sizing: border-box，你给Logo图片设置了左右20px内边距+100%宽度，默认标准盒模型下内边距会额外叠加到元素宽度上，导致图片实际宽度超出父容器限制，右侧被截断。
2. 存在多处属性书写错误：.header-img错用了flex布局属性（img为替换元素不需要设置display:flex）、.top-bar的align-items属性值top为非法值，部分浏览器解析异常也会导致布局偏移。
3. 原HTML代码漏写了.top-bar的闭合标签，同时img标签使用了错误的闭合格式，也可能触发浏览器异常渲染。

修复方案 #

修改后的完整代码如下：

@import url('https://fonts.googleapis.com/css?family=Roboto');   

/* 新增全局重置规则，统一盒模型计算逻辑 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.top-bar {
  display: flex;
  background-color: #ECECEC;
  flex-wrap: wrap;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  /* 修正非法属性值 */
  align-items: flex-start;
}

.header-img {
  /* 移除错误的flex布局属性 */
  display: block;
  width: 100%;
  max-width: 534px;
  height: auto;
  padding: 10px 20px;
  margin: 0 auto;
}

.nav-bar { 
  display: flex;
  /* 小屏宽度不足时允许导航收缩，优先保证Logo显示 */
  flex: 2 1 auto;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  font-family: 'Roboto', serif;
  padding: 5px 0;
}

.nav-bar a{
  color: black;
  text-decoration: none;
  border-right: 1px solid black;
  padding: 0 5px;
}

.nav-bar a:hover {
  color: #808080;
}

.nav-bar a:last-of-type {
  border: none;
}

#home { 
    flex-basis: 20%;
    display: flex;
    justify-content: center;
 }

#features {
  display: flex;
  flex-basis: 20%;
  justify-content: center;
}

#video {
  display: flex;
  flex-basis: 20%;
  justify-content: center;
}

#pricing {
  display: flex;
  flex-basis: 20%;
  justify-content: center;
}

body {
  padding: 100px 0 0 0;
}

/* 新增移动端适配，优化小屏导航显示效果 */
@media (max-width: 768px) {
  .nav-bar {
    font-size: 1.1em;
    padding: 10px 0;
    width: 100%;
  }
}

<header id="header">
   <title>Eltee's Electric Drums</title>
   <link href="https://fonts.googleapis.com/css2?family=Roboto">
   <div class="top-bar">
     <!-- 修正img标签错误闭合格式 -->
     <img src="https://i.imgur.com/KCS3KND.png" id="header-img" class="header-img" />
     <nav class="nav-bar" id="nav-bar">
       <a class="nav-link" href="#home" id="home">Home</a>
       <a class="nav-link" href="#features" id="features">Features</a>
       <a class="nav-link" href="#video" id="video">Video</a>
       <a class="nav-link" href="#pricing" id="pricing">Pricing</a>
     </nav> 
   <!-- 补全漏写的top-bar闭合标签 -->
   </div>
</header>

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