Responsive menu items overlap each other. How to fix the situation?

Question

css

there is such a menu: jsbin.com/save/88/edit
when the screen resolution is higher than 1050px, the menu should be in one row with the logo. But at the same time, some points run into each other. how to fix this situation?

Answer 1

Look, the problem is solved: solution
Leave the block with the text to choose the place by the width itself. Not that there is not enough space and the text goes outside the block, or add overflow: hidden;extra text to be hidden.

Answer 2

Use a margin