title: CSS position fixed same size as relative parent
body: <p>I would like to have kind of a sticky section which has a fixed position at the top when the user scrolls through the page.</p>
  
  <p>If I set the width to 100% of the sticky container it overflows the parent div container. The width should be exactly the same even if I resize the browser.</p>
  
  <p>You can see my problem here: <a href="https://jsfiddle.net/d49tyfo2/2/" rel="nofollow noreferrer">https://jsfiddle.net/d49tyfo2/2/</a></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>body {
    padding: 50px;
  }
  #d-header {
    height: 400px;
    position: relative;
    padding-bottom: 55px;
    background-color: blue;
    margin-bottom: 0px !important;
    box-shadow: 2px 5px 3px 0 rgba(0,0,0,0.16);
    z-index: 1;
  }
  
  .tab-container {
    position: absolute;
    width: 100%;
    bottom: 10px;
    height: 55px;
    letter-spacing: 1px;
  }
  
  .tabs {
      background-color: orange;
      color: white;
      text-transform: uppercase;
      width: 26.8%;
      height: 50px;
      line-height: 50px;
      float: left;
      text-align: center;
      margin-left: 10px;
    }
  
  .date {
    position: absolute;
    font-size: 72px;
    text-align: center;
    left: 0;
    right: 0;
    bottom: 65px;
  }
  
  .header-sticky {
    position: fixed;
    top: 83px;
    width: 100%;
    height: 205px;
    background-color: white;
    box-shadow: 0 5px 4px 0 rgba(0,0,0,0.16),0 0px 0px 0 rgba(0,0,0,0.12);
    border: 1px solid black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  &lt;div class="myHeader" id="d-header"&gt;
          &lt;div class="special-headline-wrap" style="width: 526px;"&gt;
              &lt;h1 class="special js-done"&gt;HEADLINE&lt;/h1&gt;
          &lt;/div&gt;
          &lt;p&gt;Aenean lacinia nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.&lt;/p&gt;
  
          &lt;div id="date-tab-wrapper" class="header-sticky"&gt;
              &lt;div class="date"&gt;2017&lt;/div&gt;
  
              &lt;div class="tab-container"&gt;
                  &lt;div class="tabs" style="margin-left: 9.1%;"&gt;Tab 1&lt;/div&gt;
                  &lt;div class="tabs"&gt;Tab 2&lt;/div&gt;
                  &lt;div class="tabs"&gt;Tab 3&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What I am missing here?</p>