How do I put the search bar on the same row as the buttons on the right?

Question

https://code.sololearn.com/W99FMrBRSZ88/?ref=app

Answer 1

notice few modifications:

used display:flex; on the ul element
and moved the input into a <li> element
changed li float to left (so that the nav bar elements stick to the left side, but can also remove it completely)
also changed the input width to 100%

i suggest you google about css flex as it is very handy for making responsive pages

https://code.sololearn.com/Wo3wecWjPs4V/?ref=app

Answer 2

first get rid of
li {
float:right;
}

it takes all your li elements and start placing them from the right side

second, add
display:flex;
inside
ul { }

this should solve a big portion of the problem, maybe even all of it once you place the <input> element inside another <li>

Answer 3

Getting rid of li {
float right;
}
didn't change anything and display:flex; was already there from putting the search box inline with the buttons