title: How to ignore a scrollbar width in CSS?
body: <h1>Explanation</h1>
  
  <p><a href="https://i.stack.imgur.com/TLGF3.png" rel="noreferrer"><img src="https://i.stack.imgur.com/TLGF3.png" alt="enter image description here"></a></p>
  
  <p>I want to line up three boxes in one line horizontally but the last one falls down.</p>
  
  <p><a href="https://i.stack.imgur.com/dWPMS.png" rel="noreferrer"><img src="https://i.stack.imgur.com/dWPMS.png" alt="enter image description here"></a></p>
  
  <p>When I remove the scrollbar, it lines up fine.</p>
  
  <p>So, the problem is caused by the scrollbar width.</p>
  
  <p>How can I ignore the scrollbar width in css?</p>
  
  <p>Do I need to write JavaScript code to calculate the scrollbar width and adjust the width of the wrapper dom element?</p>
  
  <h1>DEMO &amp; CODE</h1>
  
  <p>I posted html and css code in codePen.io.</p>
  
  <p><a href="http://codepen.io/anon/pen/kXAPap" rel="noreferrer">http://codepen.io/anon/pen/kXAPap</a></p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div id="main"&gt;
  
      &lt;ul id="window-list"&gt;
  
          &lt;li class="window"&gt;
              &lt;div class="window-thumbnail"&gt;
              &lt;/div&gt;
          &lt;/li&gt;&lt;!--
  
          --&gt;&lt;li class="window"&gt;
              &lt;div class="window-thumbnail"&gt;
              &lt;/div&gt;
          &lt;/li&gt;&lt;!--
  
          --&gt;&lt;li class="window"&gt;
              &lt;div class="window-thumbnail"&gt;
              &lt;/div&gt;
          &lt;/li&gt;&lt;!--
  
          --&gt;&lt;li class="window"&gt;
              &lt;div class="window-thumbnail"&gt;
              &lt;/div&gt;
          &lt;/li&gt;&lt;!--
  
          --&gt;&lt;li class="window"&gt;
              &lt;div class="window-thumbnail"&gt;
              &lt;/div&gt;
          &lt;/li&gt;
  
  
      &lt;/ul&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>body {
      border-top: solid 1px #a3a1a3;
      margin: 0;
      padding: 20px;
      background-color: #e7e7e7;
  }
  
  ul, li, p {
  
      margin: 0;
      padding: 0;
  
  }
  
  /*
  1px(border-left) + 30px(padding-left) + 158px(width) + 18px(margin-right) + 158px(width) + 18px(margin-right) + 158px(width) + 30px(padding-right) + 1px(border-right) = 572px
  */
  
  #main {
      width: 572px;
  }
  
  
  #window-list {
  
      background-color: #ffffff;
      border: solid 1px #b8b8b8;
      width: 510px;
      height: 350px;
      margin: 0 0 8px 0;
      overflow: scroll; /*This line causes the problem*/
      padding: 10px 30px;
      list-style-type: none;
  
  
  }
  
  .window {
      display: inline-block;
      margin: 0 18px 18px 0;
  
  
  }
  
  .window:nth-child(3n) {
  
      margin-right: 0;
  
  }
  
  .window-thumbnail {
  
      margin: 0 0 8px 0;
      height: 158px;
      width: 158px;
      border-radius: 8px;
      cursor: pointer;
      background-color: #e0e0e0;
  }
  </code></pre>