Float元素偏移边缘：.header__main .left-col未按预期紧贴边缘

I get it — your .header__main .left-col isn’t matching the tight edge alignment of .header__bar .left-col, and it boils down to two small but impactful issues: inline-block element spacing and inconsistent vertical alignment. Let’s fix this up step by step:

Step 1: Eliminate Inline-Block Whitespace Gaps #

In your .header__main .left-col, you’ve got two inline-block elements (<span class="motto"> and <div class="search">) separated by whitespace in the HTML. Browsers render this whitespace as a visible gap, which can make the left column look misaligned or unnecessarily wide.

You can fix this two ways:

• Remove whitespace directly in HTML:

  <div class="left-col">
    <span class="motto">Motto</span><div class="search">
      <form class="search__form" action="/" method="get" role="search">
        <input type="text" placeholder="Search" />
        <button>Search</button>
      </form>
    </div>
  </div>
  

• Use CSS to collapse whitespace (cleaner for long-term maintenance):

  .header__main .left-col {
    font-size: 0; /* Collapses whitespace between inline-block elements */
  }
  .header__main .motto,
  .header__main .search {
    font-size: 16px; /* Reset font size for child elements */
  }
  

Step 2: Match Vertical Alignment #

Your .header__bar uses line-height to center content vertically, but .header__main sets vertical-align: top on its inline-block elements, which makes content sit at the top instead of centered. Update this to match the header bar’s behavior:

.header__main .motto, .header__main .search, .header__main .user, .header__main .cart {
  vertical-align: middle; /* Replaces vertical-align: top */
}

Step 3: Reset Default Form Styles #

Browsers add default margins and paddings to form elements, which can throw off alignment. Add these resets to your CSS:

.search__form {
  margin: 0; /* Remove default bottom margin on forms */
}
.search__form input,
.search__form button {
  padding: 4px 8px; /* Adjust to your preferred size */
  border: 1px solid #ccc;
  margin: 0; /* Remove default button/input spacing */
}

Final Combined CSS Fix #

Drop this into your stylesheet to apply all changes at once:

/* Fix inline-block spacing */
.header__main .left-col {
  font-size: 0;
}
.header__main .motto,
.header__main .search {
  font-size: 16px;
}

/* Match vertical alignment to header bar */
.header__main .motto, .header__main .search, .header__main .user, .header__main .cart {
  vertical-align: middle;
}

/* Reset default form styles */
.search__form {
  margin: 0;
}
.search__form input,
.search__form button {
  padding: 4px 8px;
  border: 1px solid #ccc;
  margin: 0;
}

After these changes, your .header__main .left-col will align perfectly with .header__bar .left-col — both will sit flush against the container’s edge, with content vertically centered just like the header bar.

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