title: Child div overflows the parent div
body: <p>I am trying to overflow a div over another, fitting 100% of the screen.</p>
  
  <p>On my example I would like that the red bar where About Us is, to overflow the bordered div fitting 100% of the screen.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;!-- header of the page --&gt;
      &lt;header id="header"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-xs-12 holder"&gt;
                      &lt;!-- logo of the page --&gt;
                      &lt;a href="#" class="nav-opener visible-xs"&gt;&lt;i class="fa fa-bars"&gt;&lt;/i&gt;&lt;/a&gt;                        
                      &lt;div class="nav-holder"&gt;
                          &lt;!-- nav of the page --&gt;
                          &lt;nav id="nav"&gt;
                              &lt;ul class="list-inline"&gt;
                                  &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                                  &lt;li class="active"&gt;&lt;a href="quemsomos.html"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="area-atuacao.html"&gt;Area&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="servicos.html"&gt;Services&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="contato.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/nav&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/header&gt;
      &lt;!-- banner-block of the Page --&gt;
      &lt;div class="banner-block"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row row-about"&gt;
                  &lt;div class="col-xs-12 banner-box"&gt;
                      &lt;header class="banner-heading"&gt;
                          &lt;h1&gt;About Us&lt;/h1&gt;
                      &lt;/header&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- contain main informative part of the site --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.banner-block {
      overflow: hidden;
      position: relative;
  }
  
  .banner-block:after {
      position: absolute;
      content: "";
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
  }
  
  .banner-block:after {
      z-index: -1;
      background: rgba(0, 0, 0, .6);
  }
  
  .banner-block .bg-stretch {
      z-index: -1;
  }
  
  .banner-block.centercenter-block {
      text-align: center;
  }
  
  .banner-block.right-block {
      text-align: right;
  }
  
  .banner-box {
      height: 252px;
      padding-top: 158px;
      white-space: nowrap;
  }
  
  .banner-box .banner-heading {
      display: inline-block;
      white-space: normal;
      vertical-align: middle;
  }
  
  .banner-box:before {
      content: "";
      vertical-align: middle;
      display: inline-block;
      height: 100%;
      width: 1px;
      overflow: hidden;
      margin: 0 0 0 -5px;
  }
  
  .row-about {
      background: red;
  }
  .banner-heading {
      margin: 11px 0 0;
      position: absolute;
  }
  
  .banner-heading h1 {
      margin: -70px 120px 15px;
      color: #fff;
      text-transform: uppercase;
      font-size: 36px;
      line-height: 40px;
  }
  #wrapper {
      position: relative;
      overflow: hidden;
      border: 1px solid black;
      margin:20px;
  }
  
  #header {
      bottom: auto;
      z-index: 9999;
      background: #fff;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/dempc3go" rel="nofollow">http://jsfiddle.net/dempc3go</a></p>