title: Dash columns doesn't match grid system
body: <p>in the Dash layout docs, it is said that:</p>
  <pre><code>&quot;An integer 1,...,12. Column will span this many of the 12 grid columns. For a half width column, set width=6, for a third width column, set width=4, and so on.&quot;
  </code></pre>
  <p>therefore, When I defined 3 columns in a single row, each with <code>width=4</code>, I expected each to catch a third of the screen:</p>
  <pre><code>navbar = dbc.Navbar(
              dbc.Row([dbc.Col(html.H1('Column 1',style={'backgroundColor':'blue'}), width=4),
                      dbc.Col(html.H1('Column 2',style={'backgroundColor':'green'}), width=4),
                      dbc.Col(html.H1('Column 3',style={'backgroundColor':'yellow'}), width=4)])
          ,color=&quot;#ff4d4d&quot;)
  </code></pre>
  <p>but the result is very different:
  <a href="https://i.stack.imgur.com/wZdXf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wZdXf.png" alt="enter image description here" /></a></p>
  <p>as you can see, the three cols clamp in the beginning of the screen, not willing to stretch the whole way. what's going on?</p>