<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 ----------> <div class="jumbotron"> <nav> <div class="container-fluid"> El navigato </div> </nav> <div class="container-fluid"> <!-- can remove --> <div class="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><!-- can remove --> </div> <div class="contentbox"> <div class="toolbox"> <ul> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ul> </div> <div class="container-fluid content"> <div class="row"> <div class="col-md-12"> <h1>im content</h1> </div> </div> </div> </div> <!-- end content box -->

nav { color: white; } .jumbotron { margin-bottom: 0px; padding: 0px; background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.25) 100%), url("https://image.ibb.co/hWXhvx/default.jpg") center; } .dude { display: flex; justify-content: space-between; } .popular { background-color: #231f20; color: #fff; margin-bottom: 95px; /* 20px plus 1/2 toolbox */ 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 { background-color: #383536; } .toolbox { position: relative; height: 150px; margin-top: 0px; padding: 0 20px 0 20px; top: -75px; } .toolbox ul { padding: 0; height: 100%; list-style: none; display: flex; flex-wrap: nowrap; justify-content: center; z-index: 99999; } .toolbox li { max-width: 150px; 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; background-color: white; } .contentbox { position: relative; z-index: 1; }