title: How to remove annoying vertical whitespace that is blocking width to fit-to-screen?
body: <p>I have a Django-Dash-Plotly app, I'm trying to solve the issue I have where there is a slither of white on the right of the screen. Look at the picture below, notice small but extra amount of white space that is causing my responsive layout to allow for extra width scrolling (I want my app to fit-to-screen).</p>
  <p>Are there any HTML or CSS properties that unknowingly add this white space?</p>
  <p><a href="https://i.stack.imgur.com/Z6Dxx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Z6Dxx.png" alt="enter image description here" /></a></p>
  <p>Here is my Dash Layout and HTML meta-tags</p>
  <pre><code>app = DjangoDash('StockBuckets', add_bootstrap_links=True, external_stylesheets=[dbc.themes.LUX], suppress_callback_exceptions = True,  meta_tags=[
          {&quot;name&quot;: &quot;viewport&quot;, &quot;content&quot;: &quot;width=device-width, initial-scale=1, maximum-scale=1.2, minimum-scale=0.5&quot;}])
  
  
  
  body = html.Div(
      [dbc.Jumbotron(
      [
          dbc.Container(dcc.Dropdown(id=&quot;dynamic-dropdown&quot;, options=options, multi=True, placeholder=&quot;Enter Symbols of Interest&quot;),
   
          fluid=True
          )
  
      ], 
       style = {'background-color': '#68d984'}, fluid=True,
  )
     
      , dbc.Row(dbc.Col(html.Div([  
                                     ],id='output-graph'),lg=8, md=11, xs=12),justify=&quot;center&quot;)
  
  
      , html.Div(style={&quot;width&quot;:&quot;100%&quot;, &quot;height&quot;:'25px'})
  
  
      , dbc.Row([
              dbc.Col(children=[  
                                  ],id='quickfacts',lg=4, md=11, xs=12)
  
            , dbc.Col(children=[
                                  ], id='returnrates',lg=7, md=11, xs=12)
                                                                          ], justify=&quot;center&quot;, align=&quot;center&quot;)
      , html.Div(style={&quot;width&quot;:&quot;100%&quot;, &quot;height&quot;:'25px'})
  
       , dbc.Row(dbc.Col(children=[
                                  ], id='advancedstats', lg=11, md=11, xs=12), justify=&quot;center&quot;,  align=&quot;center&quot;)
  
  
      , html.Div(style={&quot;width&quot;:&quot;100%&quot;, &quot;height&quot;:'25px'})
  
  
      , dbc.Row([dbc.Col(children=[
                                  ],id= 'nextreport',lg=4, md=4, xs=12)
  
             , dbc.Col(children=[
                                  ],id='nextdividend',lg=4, md=4, xs=12)
              ], justify=&quot;center&quot;),
         ])
  </code></pre>
  <p>my index.html file for Django</p>
  <pre><code>{% extends 'base.html' %}
  
  &lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  
    &lt;head&gt;
    {% load plotly_dash %}
    {% plotly_header %}
  
    &lt;/head&gt;
  
  
    &lt;body&gt;
    {% block page_content %}
      &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-lg-12 text-center&quot;&gt;
            &lt;h1 class=&quot;mt-5&quot;&gt;Compare Equities in the SP500&lt;/h1&gt;
            &lt;p class=&quot;lead&quot;&gt;Invest smarter, use data to your advantage &lt;svg width=&quot;1em&quot; height=&quot;1em&quot; viewBox=&quot;0 0 16 16&quot; class=&quot;bi bi-lightning&quot; fill=&quot;currentColor&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
      &lt;path fill-rule=&quot;evenodd&quot; d=&quot;M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09zM4.157 8.5H7a.5.5 0 0 1 .478.647L6.11 13.59l5.732-6.09H9a.5.5 0 0 1-.478-.647L9.89 2.41 4.157 8.5z&quot;/&gt;
    &lt;/svg&gt; &lt;/p&gt;
            &lt;!--&lt;ul class=&quot;list-unstyled&quot;&gt;
              &lt;li&gt; &lt;span class=&quot;badge badge-primary&quot;&gt;New&lt;/span&gt; features coming soon.&lt;/li&gt;
            &lt;/ul&gt; --&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      
  
        
          {% plotly_direct name='StockBuckets' %} 
        
    &lt;/body&gt;
       {% plotly_footer %}
    {% endblock %}
  
  &lt;/html&gt;
  
  
  </code></pre>
  <p>Because I'm using Dash, the HTML and CSS code is a bit spread out. To make it easier here are some other CSS styles that I'm using <code>margin-top</code>, <code>margin-left</code>, <code>padding</code>, <code>width</code>.</p>
  <p>Would greatly appreciate on how to get rid of this annoyance! Thank you.</p>
  <p>EDIT:</p>
  <p>Found the issue being two div elements:
  <a href="https://i.stack.imgur.com/ZzwnG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZzwnG.png" alt="enter image description here" /></a></p>
  <p>Notice the 405px for width? When the device screen im using is 375px. This is the same for the next div below this one. I'm playing around with padding and screen size But i have no clue why these two <code>html.Div()</code> have extra width...</p>