Breaking out container border ( if the breakout is only background)

by xaliber

HTML

<div class="container">

<header>
  <img src="http://jariungu.com/img/logo1.png" alt="logo" /> 
  <ul class="navigation">
  <li>Menu 1</li>
  <li>Menu 2</li>
  <li>Menu 3</li>
  <li>Menu 4</li>
  </ul>
</header>

<div class="jumbotron">
  
  <div class="jumbotron-child">
  
  Test
  
  </div>

</div>

<footer>
   FAQ |   Kontak Kami |  Tentang Kami
</footer>

</div>

CSS

html { height: 100%; width: 100%; overflow-x: hidden; }
body { font-family: Arial, sans-serif; color: #673AB7; }
.container { width: 460px; margin: 0 auto; }
header { text-align:center; margin:0 auto; }
.navigation { list-style: none; padding:.5em 0; margin: 1em 0 2em; border: 1px solid #673AB7; border-bottom: 6px solid #673AB7; }
.navigation li { display: inline-block;  margin: 0 1em; }
footer { text-align:center; margin:2em auto 1em; }




.jumbotron { height: 400px; background: #ddd;
    position: relative; }
.jumbotron-child {height: 100px;
    display: block;
    border:1px dotted #eee;
    background: #eee;
    
    position: relative;
    z-index: 1;
    left: -10%;
    top: 10%;
    width: 480px;
    }
    
.jumbotron:before, .jumbotron:after {
    content: "";
    height: 100%;
    width: 100%;
    background: #ddd;
    display: block;
    position: absolute;
    top: 0;
    z-index: 1;
}
.jumbotron:before { left: -95%; }
.jumbotron:after { right: -95%; }