title: Issue achieving a div setup
body: <p>I tried to explain my issue with an image but unfortunately it seems I cant post one jet so ill try to explain my question as well as I can. I need in the body of my website 2 divs (containers) top part white and bottom part grey. Then there needs to be a blue box floating exactly in the middle of these 2 containers, not with a 100% width but around 80%.
  In the containers are icons that need to be clear and wont go under the blue box.
  Im have tried to do it with position relative and get a minus top in there but obviously that didnt work at all as it fell apart responsive wise.
  What can i do to make this happen well? </p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="container"&gt;
   &lt;div class="col-md-3"&gt;
    &lt;div class="icon2"&gt;&lt;/div&gt;
     &lt;p class="txt-fix-2"&gt;....&lt;/p&gt;
     &lt;p class="txt-fix-3"&gt;...&lt;/P&gt;
    &lt;/div&gt;
      &lt;div class="col-md-3"&gt;
         &lt;div class="icon1"&gt;&lt;/div&gt;
          &lt;p class="txt-fix-2"&gt;...&lt;/p&gt;
          &lt;p class="txt-fix-3"&gt;...&lt;/P&gt;
         &lt;/div&gt;
          &lt;div class="col-md-3"&gt;
           &lt;div class="icon2"&gt;&lt;/div&gt;
            &lt;p class="txt-fix-2"&gt;.....&lt;/p&gt;
            &lt;p class="txt-fix-3"&gt;......&lt;/P&gt;
           &lt;/div&gt;
            &lt;div class="col-md-3"&gt;
             &lt;div class="icon1"&gt;&lt;/div&gt;
              &lt;div class="primero-bot-icons"&gt; 
               &lt;div class="container"&gt;
                &lt;div class="col-md-3"&gt;
                 &lt;div class="icon2"&gt;&lt;/div&gt;
                  &lt;p class="txt-fix-2"&gt;...&lt;/p&gt;
                  &lt;p class="txt-fix-3"&gt;...&lt;/P&gt;
                 &lt;/div&gt;
                  &lt;div class="col-md-3"&gt;
                   &lt;div class="icon1"&gt;&lt;/div&gt;
                    &lt;p class="txt-fix-2"&gt;....&lt;/p&gt;
                    &lt;p class="txt-fix-3"&gt;...&lt;/P&gt;
                   &lt;/div&gt;
                    &lt;div class="col-md-3"&gt;
                     &lt;div class="icon2"&gt;&lt;/div&gt;
                      &lt;p class="txt-fix-2"&gt;...&lt;/p&gt;
                      &lt;p class="txt-fix-3"&gt;...&lt;/P&gt;
                     &lt;/div&gt;
                      &lt;div class="col-md-3"&gt;
                       &lt;div class="icon1"&gt;&lt;/div&gt;
                        &lt;p class="txt-fix-2"&gt;...&lt;/p&gt;
                        &lt;p class="txt-fix-3"&gt;...&lt;/P&gt;
                       &lt;/div&gt;
                      &lt;div&gt;
                       &lt;p class="bot-btn-bg"&gt;
                        &lt;button type="button" class="btn btn-primary extra"&gt;&amp;nbsp;&gt; pri&lt;/button&gt;
                        &lt;button type="button" class="btn btn-primary extra"&gt;&gt; ...&lt;/button&gt;
                       &lt;/p&gt;
                      &lt;/div&gt;
                     &lt;/div&gt;
                    &lt;/div&gt;
                     &lt;p class="txt-fix-2"&gt;.....&lt;/p&gt;
                     &lt;p class="txt-fix-3"&gt;.....&lt;/P&gt;
                   &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>