Unexplained space and copy of div not showing

I’m creating a nav bar for mobile. In order to do that, I decided to make specific version for this screen size, with the menu icon, logo and search icon aligned vertically:


The nav bar on the bottom is the existing one. I tried to copy all the contents into a new div, however, the grey divider line won’t show up in the 2nd version, and there is an unexplained additional white space after the search icon:


Project link: https://preview.webflow.com/preview/project-m-example?utm_medium=preview_link&utm_source=designer&utm_content=project-m-example&preview=2e4cb3b7154445630f30a047b005787a&mode=preview

Hi, @designor.

Let’s see. The divider line is not showing because you left all the four element (image 4, link block, search-icon, divider-line) in the horizontal direction (using flexbox).
That way, the divider-line is at the end of the div.

You can create a new div, and put all the element less the divider-line. Set the Div Block 5 as vertical direction. With this you will see the divider-line and no more unexplained additional white space after the search icon (that now is explained)

See below how to make the adjusts:

And now how it will look after:

Great, it works now, thanks!