title: horizontal responsive scrollbar
body: <p>i need a scrollbar(responsive) that has six rectangle like attachments. size of each rectlangle is 1/4 size of page.</p>
  
  <p><a href="https://i.stack.imgur.com/UsQdo.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UsQdo.jpg" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/Lpm9f.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Lpm9f.jpg" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/cy4sF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cy4sF.jpg" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/B0PFB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B0PFB.jpg" alt="enter image description here"></a>
  i write this code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;link href="Content/bootstrap.css" rel="stylesheet" /&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;style&gt;
          html, body { height: 100%; width: 100%; margin: 0; }
          .rows{
              height:33.333333333333333333%;
          }
          .cols{
              width:25%;
              float:right;
              height:100%;
              background-color:red;
              border:solid;
               font-size: 2.2vw;
               text-align:center;
               vertical-align:bottom;
              border-color:black;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="rows" &gt;
  
          sadfsadf
      &lt;/div&gt;
      &lt;div class="rows" style="width:150%;overflow-x:scroll;overflow-y:scroll;"&gt;
          &lt;div class="cols"&gt;salam&lt;/div&gt;
          &lt;div class="cols"&gt;salam&lt;/div&gt;
          &lt;div class="cols"&gt;salam&lt;/div&gt;
          &lt;div class="cols"&gt;salam&lt;/div&gt;
          &lt;div class="cols"&gt;salam&lt;/div&gt;
          &lt;div class="cols"&gt;salam&lt;/div&gt;
  
  
      &lt;/div&gt;
      &lt;div class="rows"&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>but my code has following output:</p>
  
  <p><a href="https://i.stack.imgur.com/eSuPm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eSuPm.jpg" alt="enter image description here"></a></p>
  
  <p>any idea?</p>