title: How to continue an absolute positioned column background
body: <p>I have the following problem. I have a Bootstrap 3 website where is a section with <code>.col-md-8</code> (relative) and <code>.col-md-4</code> (absolute). 
  In my <code>col-md-4</code> I have another div with absolute positioning (<code>.hf--container</code>).
  This block should be 100% width, but I need to have left: -27px there, so there's an empty space after this div. How can I get rid of this space?</p>
  
  <p>I've attached an image just in case.
  <a href="https://i.stack.imgur.com/6L2Yf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6L2Yf.png" alt="enter image description here"></a>
  Thanks!</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>.home--hero {
      background: #333;
      width: 100%;
      height: 600px;
      margin-top: 188px;
      background-size: cover;
      background-position: center;
      padding: 0;
      position: relative;
  }
  .hero-form {
      background: rgba(121,121,121,0.4);
      position: absolute;
      right: 0;
      bottom: 0;
      height: 100%;
      width: 36%;
  }
  .hf--container {
      background: rgba(255,255,255,0.8);
      bottom: 0;
      position: absolute;
      width: 100%;
      margin-left: -27px;
      padding-bottom: 9px;
      padding-left: 42px;
  }
  .hf--container:before {
      content: "";
      display: block;
      position: absolute;
      top: -13px;
      left: 0;
      border-bottom: 13px solid rgba(255,255,255,0.8);
      border-left: 27px solid transparent;
  }
  .hf--container--alt {
      background: rgba(255,255,255,0.8);
      bottom: 0;
      position: absolute;
      width: 100%;
      padding-bottom: 9px;
  }
  h3.demo {
      color: #0db20d;
      font-weight: 400;
      font-size: 25px;
      margin-bottom: 23px;
      margin-top: 22px;
      margin-left: 15px;
  }
  .register-block {
      width: 100%;
      max-width: 316px;
  }
  .form-control--home {
      background: #d3d3d3;
      -webkit-box-shadow: inset 1px 2px 4px 0px rgba(50, 50, 50, 0.75);
      -moz-box-shadow: inset 1px 2px 4px 0px rgba(50, 50, 50, 0.75);
      box-shadow: inset 1px 2px 4px 0px rgba(50, 50, 50, 0.75);
      border-radius: 0;
      padding: 10px;
      height: 37px;
      border: 1px solid rgb(204, 204, 204);
      font: 400 13.3333px Arial;
      color: #000;
  }
  .form-control--home.alt {
      padding-left: 3px;
  }
  .hero-form .form-field {
      margin-bottom: 12px;
  }
  .hero-form #privacy_box {
      padding-bottom: 16px;
  }
  .hero-form #privacy_box label {
      font-weight: normal;
      text-decoration: none;
      display: inline-block;
  }
  .hero-form #privacy_box label.option a {
      text-decoration: none;
      padding-left: 5px;
  }
  .home--hero h1 {
      font-size: 25px;
  }
  .home--hero ul {
      padding-left: 7px;
  }
  .home--hero ul li {
      color: #474747;
      font-size: 18px;
      line-height: 23px;
      list-style: none;
      padding: 2px 0 8px 13px;
      font-weight: 600;
  }
  .home--hero ul li:before {
      color: #474747;
      font-size: 18px;
      content: "✓";
      font-weight: 622;
      list-style: outside none none;
      margin-left: -20px;
      position: absolute;
      margin-top: 2px;
  }
  .hero--wrapper {
      padding-left: 39px;
      padding-top: 157px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;section class="home--hero"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-container"&gt;
                  &lt;div class="col-md-8 col-xs-12 npl"&gt;
                      &lt;div class="hero--wrapper"&gt;
                          &lt;h1&gt;Trading website&lt;/h1&gt;
                          &lt;ul class="banner-list banner-list-black"&gt;
                              &lt;li&gt;&lt;span&gt;Lorem Ipsum&lt;/span&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;span&gt;Lorem Ipsum&lt;/span&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;span&gt;Lorem Ipsum&lt;/span&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;span&gt;Lorem Ipsum&lt;/span&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;span&gt;Lorem Ipsum&lt;/span&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;span&gt;Lorem Ipsum&lt;/span&gt;&lt;/li&gt;
                          &lt;/ul&gt;    
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-4 npl npr hero-form"&gt;
                      &lt;div class="hf--container"&gt;
                          &lt;div class="register-block"&gt;
                              &lt;h3 class="demo"&gt;Demo-Account now&lt;/h3&gt;
                              &lt;form id="demo_eng" method="post" class="demo-account" action="#"&gt;
                              &lt;div class="col-md-12 npl npr"&gt;
                                  &lt;div class="col-md-6"&gt;
                                      &lt;div class="form-field"&gt;
                                      &lt;input name="fname" type="text" class="form-control form-control--home" id="first_name" value="" placeholder="First Name"&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-md-6"&gt;
                                      &lt;div class="form-field"&gt;
                                      &lt;input name="lname" type="text" class="form-control form-control--home" id="last_name" value="" placeholder="Last Name"&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-md-12"&gt;
                                      &lt;div class="form-field"&gt;
                                      &lt;input name="email" type="email" class="form-control form-control--home" placeholder="Email" id="real_email" value=""&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  
                                  &lt;div class="col-md-12"&gt;
                                      &lt;div id="privacy_box"&gt;
                                          &lt;input type="checkbox" class="form-checkbox required" value="1" name="privacy" id="privacy"&gt;  
                                          &lt;label for="privacy" class="option" id="privacy_label"&gt;
                                          &lt;a target="_blank" style="font-size:12px;" href="/pdf/LFS-Privacy-Policy.pdf"&gt;Privacy accepted&lt;/a&gt; 
                                          &lt;/label&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-sm-12"&gt;
                                      &lt;input type="hidden" name="language" value="en"&gt;
                                      &lt;input type="submit" name="quick_submit" id="quick_submit" value="Free Demo Account" class="btn btn-fill btn-block btn-success btn-reg"&gt;
                                      &lt;p&gt;Disclaimer&lt;/p&gt;
                                  &lt;/div&gt;&lt;!-- 12: buttons --&gt;
                              &lt;/div&gt;
                              &lt;/form&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;&lt;!-- content --&gt;
          &lt;/div&gt;&lt;!-- row --&gt;
      &lt;/div&gt;&lt;!-- container --&gt;
  &lt;/section&gt;&lt;!-- home hero section --&gt;</code></pre>
  </div>
  </div>
  </p>