I would like to let my page look like the following:

However, currently it looks like that:

my website

I tried to change the padding-right / left, but nothing changes within the menu.

<article style="padding-right: 10px; padding-left: 10px;" class="post-6 page type-page status-publish entry" itemscope="" itemtype="http://schema.org/CreativeWork"><header class="entry-header">

Any suggestions what I am doing wrong?

I appreciate your replies!

Well, here you go:

first step:

move entry-content div to facet-container beside facet_selection then change your css from:

.entry-content {
    float: left;
    width: 790px;
}

to:

 .entry-content {
    float: left;
    width: 100%;
}

because your parent div is entry-content and that product div is entry-content too. you should change class name for ex. to entry-content2 now set some style for it:

.entry-content2 {
    float: right;
    width: 795px;
}

then change css from:

#facet_selection {
    width: 22%;
    padding: 1%;
    margin-right: 2%;
}

to:

#facet_selection {
    width: 260px;
    padding: 1%;
    margin-right: 2%;
}

ok, now your turn, you can change width or padding or margin as you want. I see you used many extra padding or margin, you can remove some. I did it on inspect element and it works, can't move all your website to JSFiddle, so follow my instruction.

result: