title: Inheriting width from Bootstrap container when child is position fixed
body: <p>I am trying to have a header div inherit its width from its parent. The header div is <code>position: fixed</code>. The parent is contained inside a bootstrap container.</p>
  
  <p>However, as you can see in the code I've created, it is not correctly inheriting the width of its parent - it is adding some extra width from somewhere.</p>
  
  <p>This is all very annoying! Any idea how to fix this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.category-body {
    margin-left: 17% !important;
    width: 67%;
    background-color: red;
    height: 500px;
  }
  .category-header {
    position: fixed;
    top: 51px;
    width: inherit;
    background-color: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="container"&gt;
    &lt;div class="category-body"&gt;We are in the category-body
      &lt;div class="category-header"&gt;We are in the category-header&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://plnkr.co/edit/yVk15RqDqAac4H2eDJQe" rel="nofollow noreferrer">http://plnkr.co/edit/yVk15RqDqAac4H2eDJQe</a></p>