'Removing the space between the input field and button in a search bar

I am currently trying to modify a default search bar in an application and it seems that I have the option to write a CSS file to customize the search bar. My problem is that by default, the search button and the input field has a space between them when they shouldn't. I am not sure what is causing this, but I am trying to fix it in CSS.

My search bar looks like this now:

current search bar

When in fact it should be like this:

desired output

My CSS code is this for now:

.main-sidebar .sidebar .sidebar-menu .sidebar-form {
  border: none;
  display:inline-block; 
}

.main-sidebar .sidebar .sidebar-menu .sidebar-form .input-group {
  font-family: "Georgia", Times, "Times New Roman", serif;
  border:none;
}

.main-sidebar .sidebar .sidebar-menu .sidebar-form .input-group-btn {
  border:none;
}

I tried to eliminate the margin, padding, everything, but nothing seems to work (and I don't know CSS too well either to figure it out).

Thank you.

css


Solution 1:[1]

this answer is a little late but:

if you apply display: flex; to the container that agroup the search bar and the button remove the space betwwen the elements!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Álex Inzunza

Related Questions