How to ignore a scrollbar width in CSS?
<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>