title: How to use horizontal scroll when you have way many columns
body: <p>I am trying to properly put the columns in proper place when you have many columns (like 15 columns).</p>
  
  <p>Here is the screenshot for the web page I am doing.</p>
  
  <p><a href="https://i.stack.imgur.com/5OihQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5OihQ.png" alt="Here is the screenshot of the webpage"></a></p>
  
  <p>As it can be seen, I am trying to do what trello(<a href="https://trello.com" rel="nofollow noreferrer">https://trello.com</a>) does. When you have many columns, you will be able to scroll horizontally. But in here, the rest of the columns that do not fit to the page goes down to the page.</p>
  
  <p>Here is the screenshot for trello, for what I want it to do</p>
  
  <p><a href="https://i.stack.imgur.com/jKti0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jKti0.png" alt="Screenshot of trello"></a></p>
  
  <p>As it can be seen on screenshot 2, It is able to scroll horizontally, no matter how many columns you have.</p>
  
  <p>Here is the HTML code:</p>
  
  <pre><code>&lt;div id="background"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-2"&gt;
              &lt;h3&gt;Objectives 1&lt;/h3&gt;
              //content of cards here
          &lt;/div&gt;
  
          &lt;div class="col-sm-2"&gt;
              &lt;h3&gt;Objectives 2&lt;/h3&gt;
              //content of cards here
          &lt;/div&gt;
  
          &lt;div class="col-sm-2"&gt;
              &lt;h3&gt;Objectives 3&lt;/h3&gt;
              //content of cards here      
          &lt;/div&gt;
  
          &lt;div class="col-sm-2"&gt;
              &lt;h3&gt;Objectives 4&lt;/h3&gt;
              //content of cards here
          &lt;/div&gt;
  
          &lt;div class="col-sm-2"&gt;
              &lt;h3&gt;Objectives 5&lt;/h3&gt;
              //content of cards here
          &lt;/div&gt;
  
          &lt;div class="col-sm-2"&gt;
              &lt;h3&gt;Objectives 6&lt;/h3&gt;
              //content of cards here
          &lt;/div&gt;
  
          &lt;div class="col-sm-2"&gt;
              &lt;h3&gt;Objectives 7&lt;/h3&gt;
              //content of cards here
          &lt;/div&gt;
  
          &lt;div class="col-sm-2"&gt;
              &lt;h3&gt;Objectives 8&lt;/h3&gt;
              //content of cards here
          &lt;/div&gt;
  
          &lt;div class="col-sm-2"&gt;
              &lt;h3&gt;Objectives 9&lt;/h3&gt;
              //content of cards here
          &lt;/div&gt;       
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the CSS code:</p>
  
  <pre><code>#background
  { 
      background-color:#9B59B6;
      margin: -19px 0 0 0; //this is needed to remove the white space on top of the page
      min-height: 100vh; min-width: 100vw;
      overflow:hidden;
  }
  
  .col-sm-2 
  { 
      display: inline-block;
  }
  </code></pre>
  
  <p>I am doing this on ASP.net MVC 6, it is in "cshtml" format, so I do think it is a bit different from html5.(I am a newbie)</p>
  
  <p>I am new to web programming, how do I do this? </p>
  
  <p>Please help, Thank you.</p>