Creating a seamless search bar where the text input and the submit button sit flush against each other is a common design pattern. However, you might often find that the button is mysteriously raised, shifted to the right, or separated by an annoying small gap.

Why Is the Search Button Misaligned?

There are two primary reasons why your search input and button are not aligning correctly in this layout:

  • The Form Wrapper Breakpoint: You applied display: flex to the .search-container. However, the immediate child of this container is a <form> element. Because the <form> is a block-level element by default, the flex layout stops there. The <input> and <button> inside the form fall back to default inline-block behavior.
  • Inline-Block Whitespace & Baseline Alignment: Inline-block elements are sensitive to whitespace in your HTML file (like line breaks and spaces), which adds an unwanted 3px to 4px gap between them. Additionally, they align to the baseline of the text, causing vertical alignment issues when using icons.
  • Invalid HTML Semantics: Placing a <div> directly inside a <ul> tag is invalid HTML. Only <li> elements should be direct children of a list.

The Solution: Turn the Form into a Flex Container

To fix the alignment instantly, you need to make the <form> element a flex container. This removes the inline-block whitespace gap and allows you to align the elements vertically with ease.

1. Updated CSS

Add the following rule to your stylesheet to target the form inside your search container:

.top-nav .search-container form {
  display: flex;
  align-items: stretch; /* Ensures both input and button have the exact same height */
}

2. Optimized HTML

Let's also fix the HTML structure by changing the search container <div> to an <li> element to keep your markup valid and semantic:

<header>
  <ul class="top-nav">
    <li><a class="current" href="/">Homepage</a></li>
    <li><a href="/manual_placeholder">News</a></li>
    <li><a href="/manual_placeholder">Payment</a></li>
    <li><a href="/manual_placeholder">About</a></li>
    <!-- Changed div to li for valid HTML semantics -->
    <li class="search-container">
      <form action="/action_page.php">
        <input type="text" placeholder="Search.." name="search">
        <button type="submit">
          <span style="display: block;" class="material-symbols-outlined">search</span>
        </button>
      </form>
    </li>
  </ul>
</header>

Why This Fix Works

By declaring display: flex on the <form> tag:

  • No more gaps: Flexbox completely ignores the whitespace between the <input> and <button> tags in your HTML, allowing them to join seamlessly.
  • Perfect vertical alignment: Using align-items: stretch (or center) forces both elements to align perfectly along the cross axis, preventing the button from being raised or offset.
  • Clean codebase: You don't have to resort to hacky negative margins or absolute positioning to force the elements together.