***SOLVED*** Improper Display of my CSS Menu in 3 Different Breakpoints

[vance]

I inserted a CSS Menu inside a Layout Grid below the Header of my website.
When I checked the preview of my CSS menu, I found out 3 different improper displays at different breakpoints.

The display of my CSS menu at breakpoint 970 px Default View is:
https://multimedia.getresponse.com/getr ... 8a4640.jpg

Whereas the display of my CSS menu at breakpoint 320 px Portrait View is:
https://multimedia.getresponse.com/getr ... 374e44.jpg

While the display of my CSS menu at breakpoint 480 px Landscape View is:
https://multimedia.getresponse.com/getr ... 21e1c0.jpg

Here is the link to the Demo Project in Zip File:
https://multimedia.getresponse.com/getr ... ea222e.zip

Questions:
01 What could have I done to produce those unexpected results?
02 What should I do to fix the problems?
03 By the way, in the online preview, all the menu buttons were touching each other disregarding all my adjustments in the margins and paddings. Is there anything I could do to have some space between buttons?

[Pablo]

When you share a project can you please remove all content that is not relevant to your question?
So, if you have a question about a menu then the project should only have a menu.

Also, I do not recommend to use orientation in your breakpoints unless you have a good reason to do so. Now you only make it more difficult for yourself.

[vance]

ok