CSS Inline-Block Scroll side ways
<p>i'm trying to use CSS to make this code work in any horizontal measure. Like <a href="https://stackoverflow.com/questions/11209367/horizontal-scrolling-with-inline-block-working-in-firefox-but-not-in-chrome#">Horizontal Scrolling with Inline Block Working in Firefox</a>, i've been unsucessful.</p>

<p>My code is ready and gives me the visuals i want, but when we zoom the page or use it in a smaller horizontal size, instead of adding a horizontal scroll bar, it breaks down.</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Gantt Display&lt;/title&gt;
&lt;style&gt;
    body {font-family:Verdana;font-size:10px;}
    .gantt {overflow-x:auto;overflow-y:hidden;background-color:#ffffff;font-size:0;}
    .gantt .head {display:block;}
    .gantt .head .text {height:32px;display:block;text-align:center;font-weight:bold;background-color:#eeeeee;vertical-align:middle;font-size:10px;}
    .gantt .head .month {display:inline-block;border-bottom:1px solid #eeeeee;}
    .gantt .head .day {display:inline-block;width:32px;height:32px;text-align:center;background-color:#f8f8f8;margin:0;padding:0;vertical-align:middle;font-size:10px;}
    .gantt .head .weekend {display:inline-block;width:32px;height:32px;text-align:center;background-color:#eeeeee;margin:0;padding:0;vertical-align:middle;font-size:10px;}
    .gantt .chart {display:block;}
    .gantt .chart .day {display:inline-block;width:32px;text-align:center;min-height:256px;background-color:#f8f8f8;margin:0;padding:0;}
    .gantt .chart .weekend {display:inline-block;width:32px;text-align:center;min-height:256px;background-color:#eeeeee;margin:0;padding:0;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="gantt"&gt;
    &lt;div class="head"&gt;
        &lt;div class="month"&gt;
            &lt;div class="text"&gt;Setembro&lt;/div&gt;
            &lt;div class="day"&gt;19&lt;/div&gt;
            &lt;div class="day"&gt;20&lt;/div&gt;
            &lt;div class="day"&gt;21&lt;/div&gt;
            &lt;div class="day"&gt;22&lt;/div&gt;
            &lt;div class="day"&gt;23&lt;/div&gt;
            &lt;div class="weekend"&gt;S&lt;/div&gt;
            &lt;div class="weekend"&gt;D&lt;/div&gt;
            &lt;div class="day"&gt;26&lt;/div&gt;
            &lt;div class="day"&gt;27&lt;/div&gt;
            &lt;div class="day"&gt;28&lt;/div&gt;
            &lt;div class="day"&gt;29&lt;/div&gt;
            &lt;div class="day"&gt;30&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="month"&gt;
            &lt;div class="text"&gt;Outubro&lt;/div&gt;
            &lt;div class="weekend"&gt;S&lt;/div&gt;
            &lt;div class="weekend"&gt;D&lt;/div&gt;
            &lt;div class="day"&gt;3&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="chart"&gt;
        &lt;div class="day"&gt;&lt;/div&gt;
        &lt;div class="day"&gt;&lt;/div&gt;
        &lt;div class="day"&gt;&lt;/div&gt;
        &lt;div class="day"&gt;&lt;/div&gt;
        &lt;div class="day"&gt;&lt;/div&gt;
        &lt;div class="weekend"&gt;&lt;/div&gt;
        &lt;div class="weekend"&gt;&lt;/div&gt;
        &lt;div class="day"&gt;&lt;/div&gt;
        &lt;div class="day"&gt;&lt;/div&gt;
        &lt;div class="day"&gt;&lt;/div&gt;
        &lt;div class="day"&gt;&lt;/div&gt;
        &lt;div class="day"&gt;&lt;/div&gt;
        &lt;div class="weekend"&gt;&lt;/div&gt;
        &lt;div class="weekend"&gt;&lt;/div&gt;
        &lt;div class="day"&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>
</p>

<p><strong>EDITED THIS: answered!</strong>
And also, i'd like to understand why are spaces between the "vertical day bars" if "margin" and "padding" are both set to zero?</p>

<p><strong>EDITED: Show the print screens of the problem</strong>
That code, that's almost as i want, leaves me with this "resize" problem:</p>

<p>Correct Page (when the page width allows the hole page to be displayed)
<a href="https://i.stack.imgur.com/n7DWc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n7DWc.png" alt="correct page"></a></p>

<p>Deformed Page (when ... not)
<a href="https://i.stack.imgur.com/ZgriG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZgriG.png" alt="deformed page"></a></p>