Hi wishpacker,
The issue might be related to the use of display: flex in your .sidebar CSS rule. When you use display: flex on an element, it affects its direct children, making them flex items. In your case, the .sidebar element is the flex container, and both the search form and the login form are its flex items.
When you apply the gap: 15px; rule to the .mod-finder__search.input-group, it affects the gap between the input and button within that form, but it doesn't affect the layout of the other flex item (the login form) within the same flex container (the sidebar).
To resolve this issue, you can apply the gap property directly to the .sidebar class, or you can use margin or padding on the specific elements within the .sidebar that you want to space out.
.sidebar {
display: flex !important;
justify-content: flex-end;
}
/* When you use display: flex on a container (in this case, the .sidebar), it enables a flex container, and its direct children become flex items. The default behavior of flex items is to grow and shrink based on available space. If the width of one flex item changes, it can affect the layout of other flex items within the same container. To avoid unintended layout shifts, setting a fixed width for the search box can be a good solution, as it stabilizes the size of that particular flex item.*/
.mod-finder__search.input-group {
gap: 14px;
width: 293px;
}
This will add space between the search input and the button within the search form without affecting the layout of other elements within the flex container. Adjust the values as needed based on your design requirements.
