Shorten main navi

This will change the height.
.main-navigation {
height: 20px;
}

Do you mean shorter length-wise?

Where do you have it positioned?

Yea length. Not height.
Main navi is above the page header, so at the top of the website.

Hmm, maybe something like this would work..

First, we'll remove the background color from the navigation bar

.main-navigation {
      background: transparent;
}

Then, we'll add your background color to the inner element, and tell it to float so it doesn't go full width:

.main-navigation .inside-navigation {
      background:#222;
      float: left;
}

Let me know if that does what you're looking for.

The main navi is shorter now yes, but it is on the left. Because of the float ofcourse. And my navi has to be in the center.
I tried float:center but that didn't work.
Do you know how to set main navi in the center?

Hmm, maybe try this?

.main-navigation {
      background: transparent;
      text-align: center;
}

.main-navigation .inside-navigation {
      background:#222;
      display: inline-block;
}

This works! Thanks again Tom!!

But... There is a small problem. I did this and it worked, but there is a very small gap between page header and main navi now.

I have already this code in my stylesheet:

.separate-containers .page-header-image, .separate-containers .page-header-content, .separate-containers .page-header-image-single, .separate-containers .page-header-content-single {
      margin-top: 0;

How to remove this little space?

Can you link me to the site?

Thanks!

Never mind. I like the longer version of the main navi.
Thanks for your help.