Hey Hannah, let's work through these two issues to get your menu looking polished on mobile and perfectly aligned!

1. Fixing Mobile Centering Problem #

The main culprit here is likely Bootstrap's default .row styling. Bootstrap rows come with negative left/right margins (margin-left: -15px; margin-right: -15px;) to offset container padding, but this pushes your menu content outside the parent #menu container on mobile, breaking the justify-content: center effect.

Here are two straightforward fixes:

Option 1: Adjust the row for mobile

Add a media query to override the row's margins on small screens, and ensure it centers its content:

@media (max-width: 768px) {
  #menu .row {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

Also, update your #menu container to avoid overflow and edge clipping:

#menu {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0 15px; /* Prevents content from touching screen edges */
}

Option 2: Simplify the structure

Since you only have one input group, you don’t actually need the .row class at all—removing it eliminates the negative margin issue entirely:

<div id="menu" style="display: flex; justify-content: center; width: 100%; padding: 0 15px;">
  <div class="input-group">
    <!-- Your select, input, and button here -->
  </div>
</div>

2. Fixing Height Mismatch Between Select and Input #

The height difference happens for two key reasons:

• The <select> is wrapped in an .input-group-addon, which has default padding/border styles that don’t match Bootstrap’s .form-control input.
• Browsers render <select> elements with slightly different default styles than text inputs, even with framework classes applied.

The cleanest fix is to align your select with Bootstrap’s .form-control standards instead of using an .input-group-addon:

Step 1: Update the HTML structure

Move the <select> out of the addon, give it the .form-control class, and wrap the button in an .input-group-btn for proper alignment:

<div id="menu" style="display: flex; justify-content: center; width: 100%; padding: 0 15px;">
  <div class="input-group">
    <select id="selection" class="form-control" onchange="getValues(this.value)">
      <option>Choose Category</option>
      <option>Notary</option>
      <option>Deed Date</option>
      <option>Person</option>
      <option>Place</option>
      <option>Manuscript Reference</option>
      <option>Subject</option>
    </select>
    <input class="autocomplete form-control" id="search" type="text" name="search" placeholder="Choose a category" style="max-width:200px;" disabled=true>
    <span class="input-group-btn">
      <button class="btn btn-default" type="button" id="searchButton" onclick="doSparql(this.value)"><span class="fa fa-search"></span></button>
    </span>
  </div>
</div>

Step 2: Optional cross-browser consistency

If you still see minor height discrepancies across browsers, add this CSS to force uniform sizing:

#selection {
  height: 34px; /* Match Bootstrap's default .form-control height */
  line-height: 1.42857143;
}

This setup uses Bootstrap’s built-in classes to ensure all elements align perfectly, no matter the screen size.

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