[SOLVED] Problem with positioning page menu items

Hi all,

I am working in a site with slightly altered page menu and I am using Juggledads colored menu sheat sheet as a help.
I want the page menu horizontal just below a music score. And the first menu item had to be shifted a little bit to the right. The idea is that the first menu text comes below the first notes.
The site is: http://www.kerkkooramdg.nl/
I managed shifting the menu to the right by making the following css inserts:

/* ----- Aanpassingen aan menu 1 (page menu) (using Jd menu cheat sheet)----- */
/* ----- The category part is left out; we are not (yet) using categories ----- */

/* ================================================ */
/* Page menu background */
/* ================================================ */
div#menu1 {
height: 20px; /* left out Category part; otherwise use 40px */
margin-top:0px;
background: blue;
padding-left:40px;
background: #F2E1E2;
}
/* ================================================ */
/* Page Menu item's background and border */
/* ================================================ */
div#menu1 ul.rMenu {
background: #F2E1E2;
border: none 0px;
}
/* ================================================ */
/* Page Menu item */
/* ================================================ */
ul.rMenu li a:link,
ul.rMenu li a:visited,
ul.rMenu li a:hover,
ul.rMenu li a:active,
ul.rMenu li {
background: #F2E1E2;
width:168px;
text-align:center;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

But now the menu items have some overlap which i am not able to get solved.
The whole menu is not reacting as it should.

Hope anyone can give me a direction..

Btw, a great theme, so many options...

Bert