100% width to position fixed elements in fluid layout

Question

I am trying to create a fluid page layout with a fixed header. But I am having issues with making the fixed header fluid.

Here is the code:

.container {
  max-width: 68.5em;
  margin: 0px auto;
  border: 1px solid #000;
  height: 1000px
}
header {
  position: fixed;
  top: 0;
  border: 1px solid red;
  height: 55px;
  width: 100%;
}

<section class="container">
  <header>
  </header>
</section>

Js Fiddle Link: http://jsfiddle.net/s2myn87q/4/

Answer 1

Since most browsers use the following style in their default stylesheet:

body {
  margin: 8px;
}

You can use

header {
  left: 8px;
  right: 8px;
  width: auto; /* default value */
}

body {
  margin: 8px;
}
.container {
  max-width: 68.5em;
  margin: 0px auto;
  border: 1px solid #000;
  height: 1000px
}
header {
  position: fixed;
  left: 8px;
  right: 8px;
  top: 0;
  border: 1px solid red;
  height: 55px;
}

<section class="container">
  <header>
  </header>
</section>