Spacing between menu Elements / Force into 1 row

Hey guys,

(disclaimer: I just learned using inspector and adding custom css at a basic level)
I am using free elementor with the layers theme and I got the following issue:

I need those 4 menu elements in this shop menu but on mobile it pushes the fourth element into a second row. Which is uncanny as hell.

I tried everything and I googled it many times but I could not find the parameter to add to my additional css to make them move together inside the row.

I tried both
display: inline-block;
white-space: nowrap;
and nothing does the job.

My recent custom css addition for the menu is:

@media only screen and (max-width: 700px) {
.nav-horizontal ul#menu-shop-menu-1.menu{
display: inline-block;
padding: 10px;
height: auto;
}
}

i’d be veeeery grateful for a solution (:

best regards,
kosta

The page I need help with: [log in to see the link]