CSS background 100% and empty spaces in this -

I have a problem creating a webpage menu - I have to do something below in this picture. This black part is just the background of the material in the middle. I want to move this left black portion to the right side of the screen and to the right side of the screen, but I can not use 100% width on the external device because I want to leave the empty space between the empty space every red category.

... and on the wider screen it should be

This is actually.

HTML

  & lt; Header & gt; & Lt; Div class = "inner" & gt; & Lt; / Div & gt; & Lt; / Header & gt;  

CSS

* {margin: 0; Padding: 0; -WebKit-box-size: border-box; -MOZ Box-Size: border-box; Box-size: border-box; Body {overflow: hidden; / * To prevent scrollbar * /} header {status: relative; }. Player {height: 100px; Width: 980px; Margin: 0 auto; Limit: 1px solid black; } Header: First, Header: After {Content: ""; Status: Completed; Background color: light blue; Top: 0; Bottom: 0; Width: 50%; Header: first {left: 0; Margin-left: -490px; } Header: after {correct: 0; Margin-right: -490px; }