Centering div with percentage width, but with max-width

Question

I'm trying to do the following: (JSFiddle in the bottom)

How it should work:

The yellow box should fill the remaining space and even if the red box have width: 25% it should not be over 330px. If the yellow box (which is filling the remaining space) has width less then 1000px, it should be completely filled by the blue box, but if It has width greater then 1000px, the blue box should have width: 1000px and be centered inside the yellow box.

In the red box I have hide button which hides the left bar, and in the blue one, I have a button which brings back the left bar. When the left bar is hidden, it should look like this:

The problems I faced:

1. When the resolution is width>1800px (for example), the redbox (because of it's max-width is less then 25%) and its not filling the whole container. (Screen of the problem in the fiddle)
2. [Fixed] I couldn't figure out how to center the bluebox, because it's width is 100%, but the max-width don't let the box be over 1000px.(Screen of the problem, should be centered)

Here is a JSFIDDLE of my problem: JSFIDDLE. Zoom out (using ctrl+mousewheel down) to see the problem as it was in higher resolution.

I've been digging into this problem for 3,5 hours already and couldn't find a answer to my problems.

Answer 1

To center the element horizontally you need to add the following two CSS properties to the center-right class:

margin-left: auto;
margin-right: auto;

Here is the updated JsFiddle.