How can I center the wrapper? Because the ribbon menu is absolutive, its hard for me to place it responsive. Have you got an idea what I need to change to get it responsive?
This is the live example: jsFiddle
body
-nav
-div.r1
div.ribbon(...)
-div.r2
div.ribbon(...)
-div.r3
div.ribbon(...)
-div.r4
div.ribbon(...)
-div.r5
div.ribbon(...)
-div.wrapper(...)
Well you've got quite an interesting design there. You have a bunch of numbers at play. You have the default margin on the body, you have 5em of padding on the body, and you are positioning the metal box 11.8% off of that. To keep the nav element aligned, you need to play with all of these things. Mixing the units gets pretty hairy unless you have a browser that supports calc. Try this, or simplify your layout:
body {
margin:0;
padding: 5em;
background: #333;
}
.nav {
position: relative;
right: calc(-11.8% + 5em + 7px);
}
jsfiddle: http://jsfiddle.net/up7HD/6/
I'm not sure where you got 11.8% from, or why you are using 5em for padding. Both of those seem odd as em's are relative to the font-size, which would vary from browser to browser, and even browsers with the default font changed, and 11.8% won't keep the metal box centered either, nor will it keep enough space on the left for the ribbons on very small screens.