How to fill div's background-color over a div "container" (950px)

I've seen many websites have a container with a 950px width and they have a top header which contains some links and they're aligned with container's margin. Header also have a background color which fills all the area out of container and that's what I want to do too. Probably not well explained, so let's get some example: StackOverflow has an "header" where there are links like "Questions" "Jobs" "Documentation" "Tags" "Users" and they're aligned with the container, but it also has the background color filling the area out of container. My question is how to get the same header "layout" which has text/links aligned with container and the background color which is stretched over div container.

HTML CODE

    <body><div class="container">

        <div class="switcher">
        <div class="platform-switcher">

          <div id="pc-switcher"><img src="pc-logo.png"> PC Games</div>
            <div id="xbox-switcher"><img src="xbox-logo.png"> Xbox</div>
            <div id="ps4-switcher"><img src="ps4-logo.png"> PS4</div>

        </div>
        <div class="flags">
            <div class="language"></div>
            <div class="currency"></div>
        </div>
    </div>


        <div id="search">
            <form id="search-form">
                <input type="text" id="searchbar">
            </form>
        </div>
</body>

CSS CODE

.container {
    width: 950px;
    margin: 0 auto;
}

.platform-switcher {
    background-color: black;
    height: 40px;
    display: inline-block;
}

#search-form {
    float: right;
}

.platform-switcher div {

}

#pc-switcher {
    color: #cc5a00;
    height: 17px;
    padding-left: 29px;
    padding-top: 12px;
    padding-right: 18px;
    font-weight: bold;
    float: left;
    font-size: 11px;
    position: relative;
}

#xbox-switcher {
    color: #cc5a00;
    height: 17px;
    padding-left: 29px;
    padding-top: 12px;
    padding-right: 18px;
    font-weight: bold;
    float: left;
    font-size: 11px;
    position: relative;
}

#ps4-switcher {
    color: #cc5a00;
    height: 17px;
    padding-left: 29px;
    padding-top: 12px;
    padding-right: 18px;
    font-weight: bold;
    float: left;
    font-size: 11px;
    position: relative;
}

What I want is to stretch the div's background color of ".platform-switcher" out of "container" and keep aligned, to the container, "platform-switcher" content (PC Games/Xbox etc...).

Solution

If I understand, you want to have full-width elements that wrap an element that defines your "container" or "viewport" or "content" width. Here's an example.

* {
  margin:0;padding:0;
  box-sizing:border-box;
}
header,footer {
  background: black;
  color: white;
}

.viewport {
  width: 90%;
  margin:auto;
  max-width: 960px;
  padding:2em 0;
}

<header>
  <div class="viewport">
    header
  </div>
</header>

<main class="viewport">
  content
</main>

<footer>
  <p class="viewport">footer</p>
</footer>