Div messed up in Opera Mobile when zooming in

Question

I' using a div on my website with the following css class:

width: 100%;
margin: 6px auto 0;
height: 51px;
line-height: 50px;
text-align: center;
max-width: 1290px;

There are several links in this div with the following css class:

display: inline-block;
width: 7.5%;

Note: I've also tried the following:

display: inline;
padding: 0 20px;

This layout works fine on all major browsers (including Android stock browser), however im experiencing nasty problems on Opera Mobile when zooming in. Have a look:

It is being wrapped into 2 lines basically.

( div id="menu" )

Answer 1

A simple:

white-space: nowrap;

to the #menu class fixed this problem.