<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav><h3>El navigato</h3></nav> <div class="jumbotron"> <div class="containerr"> <div class="roww"> <div class="col-md-12d dude"> <h2>Good morning, it's hot today!</h2> <div class="popular"> <ul> <li>Most popular link</li> <li>Most popular link</li> <li>Most popular link</li> <li>Most popular link</li> <li>Most popular link</li> </ul> </div> </div> </div> </div> </div> <div class="contentbox"> <div class="toolbox"> <ul> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ul> </div> <div class="container content"> <div class="row"> <div class="col-md-12"> <h1>im content</h1> </div> </div> </div> </div> <!-- end content box -->

nav { background-color: white; } .jumbotron { margin-bottom: 0px; padding: 0px; background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.1) 100%), url("https://image.ibb.co/hWXhvx/default.jpg") center; height: 500px; } .containerr { padding: 0px 20px 0px 20px; } .dude { display: flex; justify-content: space-between; } .popular { background-color: #c3c3c3; margin-top: 20px; } h2 { color: #FFF; margin-top: 100px; } .popular ul { list-style-type: none; margin-left: 0px; padding-left: 0px; margin-bottom: 0px; } .popular li { padding: 10px 60px; cursor: pointer; } .popular li:hover, .toolbox li:hover { background-color: #cecece } .toolbox { position: relative; height: 150px; margin-top: 0px; padding: 0 20px 0 20px; } .toolbox ul { padding: 0; height: 100%; list-style: none; display: flex; flex-wrap: nowrap; justify-content: center; z-index: 99999; } .toolbox li { max-width: 188px; width: 100%; box-shadow: 0 2px 3px 0 rgba(0,0,0,0.1); border-right: 1px solid #d1d1d1; height: 100%; text-align: center; background-color: #fff; cursor: pointer; } .content .row { height: 500px; position: relative; z-index: -1; background-color: white; top: -75px; } .contentbox { position: relative; top: -250px; z-index: 1; } .content h1 { padding-top: 85px; }