CSS Issue Microsoft EDGE vs Chrome

[claudfs]

Greetings Sitepoint members,

I’m battling with the CSS on my site demo 1 and demo 2
it’s the same template.

On Microsoft EDGE the apply button display’s on a different row compared to all the other browsers?

Weird glitch any assistance would be helpful!

Thanks

[PaulOB]

Hi,

Its because the parent wrap is floated and floats are shrink to fit causing the last item to drop to a new line (an old bug that seems to have returned in ie).

You may be able to cure it by using flex instead.

e.g.

#navigation{
display: flex !important;
}

You will need to test though and remove the flex when the mobile menu kicks in.

Edit::

Actually that will be too awkward I think. Try this first.

#navigation::after, #navigation::before {
    display: none;
}