title: full width in container bootstrap
body: <p>I have a little problem with bootstrap, I test lot of possibility for resolve my problem, but I dont found the good..</p>
  
  <p>I have a footer. The footer is in the <code>container</code> for align with the bootstrap grid. I would like to put the width contact block at 100% at the right.Currently it is blocked against the container.</p>
  
  <p>the block are perfectly align, i have just this problem</p>
  
  <p>Curently:
  <a href="https://i.stack.imgur.com/VZoVO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VZoVO.png" alt="enter image description here"></a></p>
  
  <p>Final result :
  <a href="https://i.stack.imgur.com/VgDpg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VgDpg.png" alt="enter image description here"></a></p>
  
  <p>(See my code in full view)</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>@charset 'UTF-8';
  
  @import url('https://fonts.googleapis.com/css?family=Lato:300,400,900|Merriweather:400,400i,700i');
  
  .accompagnement {
      height: 550px;
      background: #fafafa;
  }
  
  .accompagnement__titre {
      font-family: Merriweather, serif;
      font-size: 30px;
      font-weight: 400;
      line-height: 240px;
      position: relative;
      color: #aba08c;
  }
  
  .accompagnement__titre:after {
      position: absolute;
      right: 40%;
      bottom: 70px;
      width: 200px;
      height: 1px;
      content: ' ';
      background: #aba08c;
  }
  
  .accompagnement__informations {
      background: white;
      background-clip: content-box;
  }
  
  .accompagnement__image {
      width: 100%;
      height: 210px;
      background: url('../assets/img/spot-of-light-1145368.jpg') no-repeat center center;
  }
  
  .accompagnement__texte {
      line-height: 26px;
      padding: 30px 30px;
  }
  
  .accompagnement__texte &gt; h2 {
      font-size: 24px;
      color: #8b3d61;
  }
  
  .accompagnement__texte &gt; p {
      font-weight: 300;
  }
  
  .valign {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
  }
  
  .set-relative {
      position: relative;
  }
  
  .svg-button {
      /**
      Gestion du :Hover des SVG
     */
  }
  
  .svg-button-gauche,
  .svg-button-droite {
      position: absolute;
      top: 50%;
      width: 46px;
      height: 46px;
      fill: #5e5f78;
  }
  
  .svg-button-gauche {
      left: -60px;
  }
  
  .svg-button-droite {
      right: -60px;
  }
  
  .svg-button-fleche {
      fill: none;
      stroke: #ccc;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 2px;
  }
  
  .svg-button-contour {
      fill: #ccc;
  }
  
  .svg-button-gauche:hover .svg-button-fleche,
  .svg-button-droite:hover .svg-button-fleche {
      stroke: red;
  }
  
  .svg-button-gauche:hover .svg-button-contour,
  .svg-button-droite:hover .svg-button-contour {
      fill: red;
  }
  
  footer {
      position: relative;
      background: #e5e3e8;
  }
  
  footer ul {
      margin: 50px 0 140px 0;
      color: #5e5f78;
  }
  
  footer ul li {
      font-weight: 300;
      line-height: 25px;
  }
  
  footer ul li:first-child {
      font-family: Merriweather, serif;
      font-weight: 400;
      line-height: 30px;
  }
  
  footer ul li a {
      text-decoration: none;
      color: inherit;
  }
  
  footer ul li a:hover {
      color: inherit;
  }
  
  .footer {
      font-size: 13px;
      font-weight: 300;
      padding: 30px 0;
      color: #5e5f78;
      border-top: 1px solid #fff;
  }
  
  .footer__copyright {
      padding-left: 0;
  }
  
  .footer__appolo {
      padding-right: 0;
      text-align: right;
  }
  
  .footer__appolo &gt; a {
      display: inline-block;
      text-decoration: none;
      color: #5e5f78;
  }
  
  .footer__appolo &gt; a:first-child:after {
      margin: 0 15px;
      content: '•';
  }
  
  .contacts {
      position: absolute;
      top: -20px;
      right: 0;
      height: 409px;
      background: #fff;
      background-clip: content-box;
  }
  
  .contacts &gt; h2 {
      font-family: Merriweather, serif;
      font-size: 30px;
      line-height: 30px;
      position: relative;
      margin-bottom: 55px;
      color: #aba08c;
  }
  
  .contacts &gt; h2:after {
      position: absolute;
      bottom: -30px;
      left: 0;
      width: 300px;
      height: 1px;
      content: ' ';
      background: #aba08c;
  }
  
  .contacts__tel {
      font-weight: 300;
      line-height: 30px;
      margin: 0 0 50px 0;
  }
  
  .contacts__permanence,
  .contacts__disponibilite,
  .contacts__lieu {
      font-family: Merriweather, serif;
      font-size: 14px;
      font-weight: 400;
      line-height: 30px;
      margin: 0;
  }
  
  .contacts__adresse {
      font-size: 14px;
      font-weight: 300;
      line-height: 20px;
      margin: 0;
      color: #5e5f78;
  }</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;body&gt;
  &lt;section class="container-fluid accompagnement"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="row set-relative"&gt;
                      &lt;div class="col-lg-4 accompagnement__informations"&gt;
                          &lt;div class="accompagnement__image"&gt;&lt;/div&gt;
                          &lt;div class="accompagnement__texte"&gt;
                              &lt;h2&gt;Title&lt;/h2&gt;
                              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid blanditiis dignissimos fuga nobis, nulla, pariatur, quia quisquam reiciendis repellendus tempore vero voluptas voluptate voluptatibus. Alias ducimus impedit nostrum reprehenderit ut!&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-lg-4 accompagnement__informations"&gt;
                          &lt;div class="accompagnement__image"&gt;&lt;/div&gt;
                          &lt;div class="accompagnement__texte"&gt;
                              &lt;h2&gt;Title&lt;/h2&gt;
                              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur doloribus ducimus eveniet molestiae? Amet delectus, distinctio harum incidunt, laborum libero minima minus molestias quam repudiandae suscipit ut veniam voluptatum.&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-lg-4 accompagnement__informations"&gt;
                          &lt;div class="accompagnement__image"&gt;&lt;/div&gt;
                          &lt;div class="accompagnement__texte"&gt;
                              &lt;h2&gt;Title&lt;/h2&gt;
                              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores cumque eligendi expedita id itaque minus modi neque nostrum odio omnis provident quam quas quasi quisquam ratione repellendus, sapiente similique voluptas.&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;footer&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-8"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-lg-3"&gt;
                          &lt;ul class="list-unstyled"&gt;
                              &lt;li&gt;Menu&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;SubMenu&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;SubMenu&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;SubMenu&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                      &lt;div class="col-lg-3"&gt;
                          &lt;ul class="list-unstyled"&gt;
                              &lt;li&gt;Menu&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Submenu&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Submenu&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Submenu&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                      &lt;div class="col-lg-3"&gt;
                          &lt;ul class="list-unstyled"&gt;
                              &lt;li&gt;Menu&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Submenu&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Submenu&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                      &lt;div class="col-lg-3"&gt;
                          &lt;ul class="list-unstyled"&gt;
                              &lt;li&gt;Menu&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Submenu&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Submenu&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row footer"&gt;
                      &lt;p class="col-lg-6 footer__copyright"&gt;© 2017 Company&lt;/p&gt;
                      &lt;div class="col-lg-6 footer__appolo"&gt;
                          &lt;a href="#"&gt;Plan&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-4"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-lg-12 contacts"&gt;
                          &lt;h2&gt;Contacts&lt;/h2&gt;
                          &lt;p class="contacts__permanence"&gt;Blablabla&lt;/p&gt;
                          &lt;p class="contacts__disponibilite"&gt;Blablabla&lt;/p&gt;
                          &lt;p class="contacts__tel"&gt;Blablabla&lt;/p&gt;
                          &lt;p class="contacts__lieu"&gt;Blablabla&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/footer&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks</p>