styling the search box

It’s actually already left aligned, but with large margin and padding. Try this:

#custom_html-10 ul {
    margin: 0;
    padding-inline-start: 10px;
}

#custom_html-10 means it’ll only be applied to this particular widget.

It looks like the sidebar is not wide enough for 2 columns? Unless one has an extremely large browser window. But to answer your question, there are several ways to achieve multiple columns. They almost all involve breaking the list into two. Be sure they are both contained in the same form.

One way to get two columns is to set the width of each list to 50% (or a bit less depending on margins) and float them both left. Or you could apply flex-box or grid models to achieve two column layouts.

The code is good. And what if I’d have the search button right-side?

You’d use float:right; with appropriate selectors. For example:

#custom_html-10 input[type="submit"] {
    float: right;
    margin-right: 10%;
}

However, this does not behave responsively very well because the ul container overflows beyond the forms’s limits. This is due to a display: inline-block; applied to the ul element. Locating the search button would work better if the ul has display: block; instead. I’m not sure why inline-block was applied, so changing to block might have some other side effect I’m unaware of.

The position is good, but without margin-right: 10%;

Maybe it could be a good idea having a long “search button” about 80% of the box…no need to point the button

Yeah, the 10% is only valid for a limited range of viewport widths because the ul container does not align with the form. It worked for the width I was using. You clearly are using a different width ?? We can do 80% width and center it, but the ul misalignment takes it off center. 90% and float left looks good to me, but again it depends on the viewport width. It overflows at narrower widths. IMO it looks better if you remove:

.searchandfilter ul {
    display: inline-block;
}

Then do:

#custom_html-10 input[type="submit"] {
    float: left;
    width: 90%;
}

On laptop the sidebar is not big enough to contain the search button and the top box category selector

On mobile the search and filter box has no right margin, I tryed with

@media only screen and (max-width: 769px){.searchandfilter {padding-right:10px;
	}
	}

But I think there is a conflict of css somewhere. I see just a secon the right space and then it disappears

display: inline-block; for the ul element is why the button overflows the form. Even without this, the ul element does not align with the form, so you cannot use 100% width. 90% is more appropriate.

Mobile view looks OK to me. The button is left aligned and not full width, but I think it’s appropriate for the mobile context. I don’t see any layout shift on load. Have you corrected anything since you last posted (about 19 hours ago for me)? Layout shifts are not uncommon, but they should be avoided if at all possible. Shafts can be caused by one CSS rule being overridden by another that’s loaded later in the process. While technically a “conflict”, it’s not considered an error, only less than desirable.