如何实现Header Logo左对齐？已定位CSS全局margin问题

原问题描述 #

Header区域内的Logo上下均设有导航栏，但Logo始终处于居中状态，无法设置为左对齐。

问题根源定位 #

经过调试代码确认，CSS首行的全局样式* { margin:0; padding: 0; outline: 0; }中的margin:0是核心问题：

• 保留margin:0时，Logo会被顶部导航栏挤压至导航栏末端，看似居中实际是偏移后的结果；
• 移除margin:0后，Logo会自动左移至正确位置。

解决方案 #

方法1：调整全局重置样式 #

移除全局样式中的margin:0，避免强制清零所有元素的外边距导致布局挤压：

/* 修改前 */
* { margin:0; padding: 0;  outline: 0; }

/* 修改后 */
* { padding: 0;  outline: 0; }

方法2：针对性修复Logo容器样式 #

如果需要保留全局margin重置，可单独为Logo所在的#header设置样式，确保它不被导航栏挤压：

#header {
  height: 82px;
  float: left;
  margin-left: 0 !important; /* 强制设置左外边距为0，抵消全局样式影响 */
}

完整修改后的代码示例 #

CSS代码 #

* { padding: 0;  outline: 0; }
body, html { height: 100%;}

footer,
header,
menu,
nav,
section {
  display: block;
}

.shell {
  width: 100%;
  margin: 0 auto;
}

.container {
  background: #fff;
}

#header {
  height: 82px;
  float: left;
}

#logo {
  height: 80px;
  display: block;
  border: 2px solid silver;
}

#navigation,
#topnav {
  height: 37px;
  font-weight: 600;
  background-color: #1B2A47;
}

#navigation ul,
#topnav ul {
  list-style: none;
  list-style-position: outside;
}

#navigation ul li,
#topnav ul li {
  float: left;
  padding-right: 2px;
  line-height: 40px;
  font-size: 13px;
}

#navigation ul li a,
#topnav ul li a {
  display: block;
  padding: 0 22px 0 22px;
  color: #FFFFFF;
  text-decoration: none;
}

#navigation ul li a:hover,
#topnav ul li a:hover {
  color: #7DC33A;
  text-decoration: none;
}

#navigation ul li.first a,
#topnav ul li.first a {
  padding-left: 30px;
}

#navigation a.nav-btn {
  display: none;
}

HTML代码 #

<div id="wrapper">
  <div class="shell">
    <nav id="topnav">
      <ul>
        <li><a href="link.html">Link</a></li>
        <li><a href="link.html">Link</a></li>
        <li><a href="link.html">Link</a></li>
      </ul>
    </nav>
    <div class="container">
      <header id="header">
        <h1 id="logo"> <img src="https://picsum.photos/50/80" alt="Logo" /></h1>
      </header>

      <nav id="navigation">
        <a href="#" class="nav-btn">Menu<span class="arr"></span></a>
        <ul>
          <li><a href="link.html">Link</a></li>
          <li><a href="link.html">Link</a></li>
          <li><a href="link.html">Link</a></li>
        </ul>
      </nav>
    </div>
  </div>
</div>

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